scrollTo不滚动窗口

我不知道为什么这不起作用

HTML

Back to top 

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，consolle不会给出任何错误

更新下面的评论让我了解问题是使用jQuery scrollTop和html，正文设置为溢出…因此在堆栈上创建了一个新问题 。

Answer 1

好吧，你的第一个代码片段不起作用，因为window没有body的scrollTop 属性 （这解释了为什么你的第二个代码片段可以正常工作 – 你可以做console.log($(window))和检查它的属性只是为了确保） 。

但是，您可以执行$(window).animate(..)并且您不会在浏览器控制台上看到任何错误 ，因为该对象支持它。 问题是当尝试为受影响的元素不支持的动画指定scrollTop 参数时 ，它将无法按预期工作（ 只需从第二个代码片段中注释e.preventDefault()行，看看会发生什么 – 它在测试时停止脚本执行，我真的不知道你为什么要使用那条线） 。

顺便说一句，我也不知道为什么你说你的第二个代码片段不起作用（可能取决于你使用的浏览器，至少它使用Chrome工作） 。 所以，据我记得，在jQuery选择器中只使用body或html 标签时会出现一些问题，但你可以试试这个$('body,html,document')以获得更好的兼容性然后附加 动画function 。 我建议你做一些关于如何使用scrollTop crossbrowser的研究 。

另一个建议（如果你的第二个代码片段仍然无法正常工作）可能是检查你的DOM是否已经加载，也许你可以尝试在onDomReady中使用你的代码，这意味着将它放在$(function(){ .. }); 或$(document).ready(..) 。

现场演示 ： 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 );