jQuery scrollTop（）方法不起作用
[英]jQuery scrollTop() method not working
问题描述
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>在最上面有我页。
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. 如果需要，请向我询问代码的详细信息。
4 个解决方案
解决方案1
15 已采纳 2015-08-28 18:13:41
You have to use window instead of html : 你必须使用window而不是html ：
$(window).scrollTop( $("#topofthePage").offset().top );
Note that window should not be enclosed in quotes as i'ts an object and not a tag. 请注意， window不应该用引号括起来，因为它是一个对象而不是标记。
解决方案2
3 2016-06-27 21:46:07
A common scrollTo issue is having overflow set on the "html, body" element in css. 一个常见的scrollTo问题是在css中的“html，body”元素上设置了溢出。 Rarely mentioned when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering. 在html / body元素上滚动/动画问题时很少提到，并且最终会导致过度的过度工程。
If overflow needs to be set, put it on the body element only . 如果需要设置溢出，请仅将其放在body元素上 。 Not both html,body. 不是html，身体。
It is also a good habit to use a data-* attribute in place of classes or IDs in your html. 在html中使用data- *属性代替类或ID也是一个好习惯。 This gets you in the habit of separating styles from code. 这会让你养成将样式与代码分开的习惯。 Consider this to make your life easier in the future: 考虑到这一点，以便将来让您的生活更轻松：
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 准备就绪功能 »使用属性名称选择器初始化doc ready，以便为多个调用创建灵活性
scrollioreceiver('[data-sender]');
Hope this helps! 希望这可以帮助！
解决方案3
1 2015-08-28 18:58:30
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);
});
解决方案4
-1 2015-08-28 18:17:26
Better way to use: 更好的使用方式：
$(document).ready(function () {
$('.navtoTop').click(function(){
$(window).scrollTop()
$("window").scrollTop( $("#topofthePage").offset().top );
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.