Javascript jQuery scrollTop() 方法不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32277323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery scrollTop() method not working
提问by MD Danish Ansari
I have the following jQuery code
我有以下 jQuery 代码
$(document).ready(function () {
$('.navtoTop').click(function(){
$("html").scrollTop( $("#topofthePage").offset().top );
});
});
where 'navtoTop' is the class of the button(something like 'Back to top') which has the fixed position in the bottom-left of the page and 'topofthePage' is the id of the <div>at the most top of my page.
其中“navtoTop”是按钮的类（类似于“返回顶部”），它在页面左下角具有固定位置，“topofthePage”是<div>我页面最顶部的 id 。
I have even tried this
我什至试过这个
$('.navtoTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
Here is the html code
这是html代码
<body>
<div id="topofthePage"></div>
...
...
<img src="navtoTop.png" class="navtoTop">
</body>
I don't know what is going wrong but this is not working. Will someone explain and give a good solution?
我不知道出了什么问题，但这不起作用。有人会解释并给出一个好的解决方案吗？
Ask me the detail of code if you want.
如果你想要，问我代码的细节。
回答by taxicala
You have to use windowinstead of html:
你必须使用window而不是html：
$(window).scrollTop( $("#topofthePage").offset().top );
Note that windowshould not be enclosed in quotes as i'ts an object and not a tag.
请注意，window不应用引号括起来，因为 i 不是对象而不是标签。
回答by CR Rollyson
A common scrollTo issue is having overflow set on the "html, body" element in css. Rarely mentioned when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering.
一个常见的 scrollTo 问题是在 css 中的“html, body”元素上设置了溢出。在 html/body 元素上出现滚动/动画问题时很少提及，最终可能会导致过度设计。
If overflow needs to be set, put it on the body element only. Not both html,body.
如果需要设置overflow，只放在body元素上即可。不是 html,body。
It is also a good habit to use a data-* attribute in place of classes or IDs in your html. This gets you in the habit of separating styles from code. Consider this to make your life easier in the future:
使用 data-* 属性代替 html 中的类或 ID 也是一个好习惯。这让您养成将样式与代码分开的习惯。考虑这一点，让您将来的生活更轻松：
Create Reusable Scroll Function
创建可重用的滚动函数
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
});
}
}
Create data attributes to html elements (data-name is arbitrary and should make sense):
为 html 元素创建数据属性（数据名称是任意的，应该有意义）：
ADD HTML LINK
添加 HTML 链接
<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>
ADD HTML ELEMENT
添加 HTML 元素
<div data-receiver="ScrollToMatch">Scrolls To This Element</div>
VERIFY CSS? overflow added to "html,body" won't work
验证 CSS吗？溢出添加到“html，body”将不起作用
body { overflow-x: hidden; }
INIT FUNCTION ON READY? initialize on doc ready with attribute name selector to create flexibility on multiple calls
初始化函数准备好了吗？使用属性名称选择器在文档上初始化，以在多个调用中创建灵活性
scrollioreceiver('[data-sender]');
Hope this helps!
希望这可以帮助！
回答by leo.fcx
You already got an answer on this. But, since you also want a smooth scrolling, consider the following alternative:
你已经得到了这个答案。但是，由于您还想要平滑滚动，请考虑以下替代方案：
$('.navtoTop').click(function(){
$('html, body').animate({
scrollTop: $('#topofthePage').offset().top
}, 1000);
});
回答by Mbj web-development
Better way to use:
更好的使用方法：
$(document).ready(function () {
$('.navtoTop').click(function(){
$(window).scrollTop()
$("window").scrollTop( $("#topofthePage").offset().top );
});
});
