Question

我不确定为什么这不起作用

HTML

    <a href="#" id="scrollTop" class="margin-top-40 btn btn-danger btn-lg top btn-not-100">Back to top</a>

的jQuery

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $(window).animate({scrollTop: 0}, 'slow');
    });

即使尝试了以下仍有负面结果

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $("body, html").animate({scrollTop: 0}, 'slow');
    });

的CSS

    html, body {height:100%;}

使用jquery-1.10.2.js，不会给出任何错误

更新下面的评论让我了解问题是使用jQuery scrollTop和html，正文设置为溢出...因为a new question has been created here on stack。

Answer 1

好吧，您的第一个代码代码段无法正常工作，因为window没有scrollTop 属性 { {1}}有（这解释了为什么你的第二个代码片段可以正常工作 - 你可以body并检查它的属性以确保）。< / p>

但是，您可以执行console.log($(window))并且您在浏览器控制台上看不到任何错误，因为对象支持它。问题在于尝试为受影响的元素不支持的动画指定$(window).animate(..) 参数时它赢了＆＃ 39;按预期工作（只是评论你的第二个代码片段中的scrollTop行，看看会发生什么 - 它在测试时停止脚本执行，我真的不知道你为什么使用它线）

顺便说一下，我也不知道为什么你说你的第二个代码片段不起作用（也许这取决于你使用的浏览器，至少它可以使用Chrome）。因此，据我记得，在 jQuery选择器中仅使用e.preventDefault()或body 标记时，存在一些问题{1}}但您可以尝试使用此html以获得更好的兼容性，然后附加 动画功能。我建议你做一些关于如何滚动横向浏览器的研究。

另一个建议（如果您的第二个代码段仍然无法正常工作）可能是检查您的 DOM 是否已经加载，也许您可以尝试使用您的代码在 onDomReady ，这意味着将其放在scrollTop或$('body,html,document')内。

现场演示：http://jsfiddle.net/oscarj24/n7Buw/2/

Answer 2

得到了这个问题，感谢评论，我注意到我有body: overflow-x:hidden这意味着当我们在body上使用overflow时，scrollTop不起作用，html

Answer 3

这行代码在我的网站上为我工作：

$("body, html").animate({scrollTop: 0}, 'slow');

所以它必须是调用代码。也许你有重复的id。在控制台中输入：

alert( $('*#scrollTop').size() );

或者您可以使用多个选择器：

function myScrollTop( e )
{
    e.preventDefault();
    $("body, html").animate({scrollTop: 0}, 'slow');
}

// Map to future elements
$('body').on( 'click', '#scrollTop', myScrollTop );

// Get all elements with id if there are multiple
$('*#scrollTop').click( myScrollTop );

Answer 4

试试这个：

html, body {}

your_element {
  height: calc(100vh);
}

scrollTo不滚动窗口

4 个答案: