jQuery 滚动到页面底部
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4249353/
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 Scroll To bottom of the page
提问by AnApprentice
After my page is done loading. I want jQUery to nicely scroll to the bottom of the page, animating quickly, not a snap/jolt.
在我的页面加载完成后。我希望 jQUEry 很好地滚动到页面底部,快速动画,而不是快速/震动。
Do iI need a plugin like ScrollTo
for that? or is that built into jQuery some how?
我需要这样的插件ScrollTo
吗?或者它是如何内置到 jQuery 中的?
回答by Nick Craver
You can just animate to scroll down the page by animating the scrollTop
property, no plugin required, like this:
您可以通过动画scrollTop
属性来设置动画以向下滚动页面,不需要插件,如下所示:
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
Note the use of window.onload
(when images are loaded...which occupy height) rather than document.ready
.
请注意使用window.onload
(当图像加载时...占据高度) 而不是document.ready
.
To be technically correct, you need to subtract the window's height, but the above works:
为了在技术上正确,您需要减去窗口的高度,但上述方法有效:
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
To scroll to a particular ID, use its .scrollTop()
, like this:
要滚动到特定 ID,请使用它的.scrollTop()
,如下所示:
$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
回答by Josiah Ruddell
something like this:
像这样:
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, 1000);
回答by Alin Razvan
$('html,body').animate({ scrollTop: 9999 }, 'slow');
As simple as this , 9999 page height ... big range so it can reach to bottom .
就这么简单,9999 页面高度...大范围所以它可以到达底部。
回答by Sarath Ak
You can try this
你可以试试这个
var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
回答by f123
$("div").scrollTop(1000);
Works for me. Scrolls to the bottom.
为我工作。滚动到底部。
回答by Anbu
Using 'document.body.clientHeight' you can get the seen height of the body elements
使用 'document.body.clientHeight' 你可以获得 body 元素的高度
$('html, body').animate({
scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);
this scrolls at the id 'particularDivision'
这在 id 'particularDivision' 滚动
回答by Ilia Rostovtsev
The scripts mentioned in previous answers, like:
先前答案中提到的脚本,例如:
$("body, html").animate({
scrollTop: $(document).height()
}, 400)
will not workin Chromeand will be jumpy in Safariin casehtml
tag in CSShas overflow: auto;
property set. It took me nearly an hour to figure out.
将无法工作在Chrome浏览器,并将于Jumpy在Safari浏览器的情况下,html
标签在CSS具有overflow: auto;
属性集。我花了将近一个小时才弄明白。
回答by Adnan Tahir
For jQuery 3, Please change
对于 jQuery 3,请更改
$(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
$(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
to:
到:
$(window).on("load", function (e) { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
$(window).on("load", function (e) { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })
回答by WapShivam
var pixelFromTop = 500;
$('html, body').animate({ scrollTop: pixelFromTop }, 1);
So when page open it is automatically scroll down after 1 milisecond
所以当页面打开时它会在 1 毫秒后自动向下滚动
回答by Roshan Madusanka
function scrollToBottom() {
$("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}
This is the solution work from me and you find, I'm sure
这是我的解决方案,你会发现,我敢肯定