Question

我有以下jQuery代码

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

其中'navtoTop'是按钮的类（类似'返回顶部'），它在页面的左下角有固定位置，'topofthePage'是<div>的id我页面的最顶部。

我甚至试过这个

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

这是html代码

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

我不知道出了什么问题，但这不起作用。有人会解释并给出一个好的解决方案吗？

如果需要，请向我询问代码的详细信息。

Answer 1

您必须使用window代替html：

$(window).scrollTop( $("#topofthePage").offset().top );

请注意window不应该用引号括起来，因为它是一个对象，而不是一个标记。

Answer 2

一个常见的scrollTo问题是在css中的“html，body”元素上设置了溢出。在html / body元素上滚动/动画问题时很少提到，并且最终会导致过度的过度工程。

如果需要设置溢出，请将其仅放在body元素上。不是html，身体。

在html中使用data- *属性代替类或ID也是一个好习惯。这会让你养成将样式与代码分开的习惯。考虑到这一点，以便将来让您的生活更轻松：

创建可重复使用的滚动功能

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

为html元素创建数据属性（数据名称是任意的，应该有意义）：

添加HTML链接

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>

添加HTML元素

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

验证CSS »溢出添加到“html，body”将无法正常工作

body { overflow-x: hidden; }

INIT FUNCTION ON READY »使用属性名称选择器初始化doc ready，以便为多个调用创建灵活性

scrollioreceiver('[data-sender]');

希望这有帮助！

Answer 3

你已经得到了答案。但是，由于您还想要平滑滚动，请考虑以下替代方法：

$('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
});

Answer 4

更好的使用方式：

$(document).ready(function () {
    $('.navtoTop').click(function(){
          $(window).scrollTop()
          $("window").scrollTop( $("#topofthePage").offset().top );
    }); 
});

jQuery scrollTop（）方法不起作用

4 个答案: