尝试获取数据属性，但返回undefined

更新：对不起所有人，但这是我的错误。我在数据目标中调用了错误的ID，而不是我想滚动的div的实际ID ...因此错误！我感到非常愚蠢，并且很抱歉浪费大家的时间。我会删除这个问题，但它不会让我。尝试获取数据属性，但返回undefined

我希望能够创建一个简单的JS函数从任何股利的任何目标的div smoothscroll。

我想这样做的方法是通过检测功能平滑卷轴添加类，并使目标div由data-target="#elementID"指定。

<div class="smooth-scroll" data-target="targetDiv">Source link</div> 

// Elsewhere on the page 
<div id="targetDiv"></div>

但是当我尝试使用下面的功能，我所看到的来源时，点击是Uncaught TypeError: Cannot read property 'top' of undefined

$('.smooth-scroll').click(function() { 
    event.preventDefault(); 
    var target = this.getAttribute('data-target'); 
    $('html').animate({ 
     scrollTop: $('#'+target).offset().top, 
     easing: 'easeInOutQuart'  
    }, 1000); 
});

我认为问题是，它没有得到的target值。这是正确的，还是有别的？

令人讨厌的是，当我试图创建一个jsFiddle时，它的工作原理 - 那么究竟是怎么回事？ https://jsfiddle.net/rv0nmb44/

来源

2017-06-16 Lee

'event'没有定义 –

你能安慰了目标，让我们知道它说什么？ – Vivick

你正在使用jQuery，所以你可以使用'$（this）.data（'target'）'或$（this）.attr（'data-target'）'来指定'target'并且看看是否这样做一个区别。 –

我在第一个和目标div（蓝色框）之间添加了一个中间div块。正如你所看到的，它似乎正确地获得了top属性。

如果这不起作用，您能否提供更多详细信息，如您的非工作代码的实时片段？

$('.smooth-scroll').click(function(event) { 
 
    event.preventDefault(); 
 
    var target = $(this).data('target'); 
 
    var top = $('#'+target).offset().top; 
 
    console.log(top); 
 
    $('html').animate({ 
 
     scrollTop: top, 
 
     easing: 'easeInOutQuart'  
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="smooth-scroll" data-target="targetDiv">Source link</div> 
 

 
<div style="height: 300px; background-color: blue;"></div> 
 

 
<div id="targetDiv"></div>

来源

2017-06-16 13:31:35

不做任何不同的事情，仍然收到有关'顶部'的错误 – Lee

检查上面的代码片段。它似乎工作 –

尝试获取数据属性，但返回undefined

回答

相关问题