Jquery平滑滚动：无法读取未定义的属性“顶部”

Question

我正在尝试编写一个 backtotop 按钮脚本，该按钮将位于整个站点的页脚中，由于某种原因，它返回“无法读取未定义的属性 'top'”。 任何帮助都会很棒，干杯。

JQUERY

$( '#backtotop' ).on('click', function(event) {
        event.preventDefault();
        var target = '#'+$(this).data('target')
            $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 1000);
 });

HTML

    <a href="#" data-target="navigation"><span id="backtotop"><img id="upwardarrow" src="/img/upwardarrow.png"></span></a>

Answer 1

试试：

var target = '#'+$(this).parent().data('target');

你代码中的this是指没有data-target的span，你必须从父<a>访问它

或者像这样修改你的html：

<a href="#" id="backtotop" data-target="navigation"><span><img id="upwardarrow" src="/img/upwardarrow.png"></span></a>

将id="backtotop"移动到<a>标签，不需要改js。

Answer 2

你忘了用关闭线路；
另外，我更改了目标定义。

$( '#backtotop' ).on('click', function(event) {
        event.preventDefault();
        var target = $(this).parents().attr("href");
        alert(target);
            $('html, body').animate({
            scrollTop: $(target).offset().top;
        }, 1000);
 });

经过测试并且可以正常工作。

Answer 3

试试下面的代码：

$( "#target" ).click(function() {
  $(document).scrollTop(0);
});