Question

更新：对不起大家，但这对我来说是个错误。我在数据目标中调用错误的ID而不是我要滚动到的div的实际ID ...因此错误！我觉得非常愚蠢，对不起浪费每个人的时间。我会删除这个问题，但它不会让我。

我希望能够创建一个简单的JS函数，以便从任何div平滑滚动到任何目标div。

我想要这样做的方法是在添加平滑滚动类时检测函数，并使data-target="#elementID"指定目标div。

<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的价值。这是正确的，还是还有其他的东西？

Annoyingy，当我试图创建一个jsFiddle时，它可以工作 - 那么究竟是怎么回事？ https://jsfiddle.net/rv0nmb44/

Answer 1

我在第一个和目标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>

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

1 个答案: