blocks|key|1384059|text|如果你想要一个很好的慢速动画滚动，对于任何使用href="#bottom"的锚点，这将把你滚动到底部：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1384060|$("a[href='#bottom']").click(function()+{
++$("html,+body").animate({+scrollTop:+$(document).height()+},+"slow");
++return+false;
});|code-block|syntax|javascript|1384061|您可以随意更改选择器。|1384062|entityMap^0|N|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

If you want a nice slow animation scroll, for any anchor with <code>href="#bottom"</code> this will scroll you to the bottom:

<pre><code>$("a[href='#bottom']").click(function() {
 $("html, body").animate({ scrollTop: $(document).height() }, "slow");
 return false;
});
</code></pre>

Feel free to change the selector.

blocks|key|1169113|text|scrollTop()返回从可滚动区域看不到的像素数，因此给出它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1169114|$(document).height()|code-block|syntax|javascript|1169115|实际上会超出页面的底部。为了让滚动在页面底部真正“停止”，浏览器窗口的当前高度需要减去。这将允许在需要时使用缓和，因此它变成：|1169116|$('html,+body').animate({+
+++scrollTop:+$(document).height()-$(window).height()},+
+++1400,+
+++"easeOutQuint"
);|1169117|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

scrollTop() returns the number of pixels that are hidden from view from the scrollable area, so giving it:

<pre><code>$(document).height()
</code></pre>

will actually overshoot the bottom of the page. For the scroll to actually 'stop' at the bottom of the page, the current height of the browser window needs subtracting. This will allow the use of easing if required, so it becomes:

<pre><code>$('html, body').animate({ 
 scrollTop: $(document).height()-$(window).height()}, 
 1400, 
 "easeOutQuint"
);
</code></pre>

blocks|key|1383913|text|例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1383914|$('html,+body').scrollTop($(document).height());|code-block|syntax|javascript|1383915|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For example:

<pre><code>$('html, body').scrollTop($(document).height());
</code></pre>

blocks|key|1169192|text|在这个帖子不能满足我的特定需求后(在我的例子中，在一个特定的元素中滚动，在我的例子中是一个文本区域)，我在great+beyond中发现了这一点，这对其他阅读这篇讨论的人可能会有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1169193|Alternative+on+planetcloud|offset|length|1169194|因为我已经有了jQuery对象的缓存版本(下面代码中的myPanel是jQuery对象)，所以我添加到事件处理程序的代码简单如下：|style|CODE|1169195|myPanel.scrollTop(myPanel[0].scrollHeight+-+myPanel.height());|code-block|syntax|javascript|1169196|(谢谢本)|1169197|entityMap|0|LINK|mutability|MUTABLE|url|http://blogs.planetcloud.co.uk/mygreatdiscovery/post/Scroll-to-the-bottom-of-a-textarea-using-jQuery.aspx#disqus_thread^0|0|0|Q|0|0|R|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@$D|14|E|15|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

After this thread didn't work out for me for my specific need (scrolling inside a particular element, in my case a textarea) I found this out in the great beyond, which could prove helpful to someone else reading this discussion:

<a href="http://blogs.planetcloud.co.uk/mygreatdiscovery/post/Scroll-to-the-bottom-of-a-textarea-using-jQuery.aspx#disqus_thread" rel="noreferrer">Alternative on planetcloud</a>

Since I already had a cached version of my jQuery object (the <code>myPanel</code> in the code below is the jQuery object), the code I added to my event handler was simply this:

<pre><code>myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());
</code></pre>

(thanks Ben)

blocks|key|1169246|text|一个简单的函数，可以跳转(立即滚动)到整个页面的底部。它使用内置的.scrollTop()。我还没有尝试使其适用于单独的页面元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1169247|function+jumpToPageBottom()+{
++++$('html,+body').scrollTop(+$(document).height()+-+$(window).height()+);
}|code-block|syntax|javascript|1169248|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scrollTop/^0|X|C|X|C|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

A simple function that jumps (instantly scrolls) to the bottom of the whole page. It uses the built-in <a href="http://api.jquery.com/scrollTop/" rel="nofollow"><code>.scrollTop()</code></a>. I haven’t tried to adapt this to work with individual page elements.



<pre class="lang-js prettyprint-override"><code>function jumpToPageBottom() {
 $('html, body').scrollTop( $(document).height() - $(window).height() );
}
</code></pre>

blocks|key|1384362|text|如果你不关心动画，那么你就不需要得到元素的高度。至少在我尝试过的所有浏览器中，如果你给scrollTop一个大于最大值的数字，它就会滚动到底部。所以给它一个尽可能大的数字：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1384363|$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);|code-block|syntax|javascript|1384364|如果你想滚动页面，而不是一些带有滚动条的元素，只需将myScrollingElement设置为'body，html‘即可。|1384365|由于我需要在多个地方执行此操作，因此我编写了一个快速而粗糙的jQuery函数，以使其更方便，如下所示：|1384366|(function($)+{
++$.fn.scrollToBottom+=+function()+{
++++return+this.each(function+(i,+element)+{
++++++$(element).scrollTop(Number.MAX_SAFE_INTEGER);
++++});
++};
}(jQuery));|1384367|所以我可以这样做，当我附加一个buncho的东西：|1384368|$(myScrollingElement).append(lotsOfHtml).scrollToBottom();|1384369|entityMap^0|17|9|0|0|Q|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|V|$]]

If you don't care about animation, then you don't have to get the height of the element. At least in all the browsers I've tried, if you give <code>scrollTop</code> a number that's bigger than the maximum, it'll just scroll to the bottom. So give it the biggest number possible:

<pre><code>$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);
</code></pre>

If you want to scroll the page, rather than some element with a scrollbar, just make <code>myScrollingElement</code> equal to 'body, html'.

Since I need to do this in several places, I've written a quick and dirty jQuery function to make it more convenient, like this:

<pre><code>(function($) {
 $.fn.scrollToBottom = function() {
 return this.each(function (i, element) {
 $(element).scrollTop(Number.MAX_SAFE_INTEGER);
 });
 };
}(jQuery));
</code></pre>

So I can do this when I append a buncho' stuff:

<pre><code>$(myScrollingElement).append(lotsOfHtml).scrollToBottom();
</code></pre>

blocks|key|1384286|text|这个方法对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1384287|var+elem+=+$('#box');
if+(elem[0].scrollHeight+-+elem.scrollTop()+==+elem.outerHeight())+{
++//+We're+at+the+bottom.
}|code-block|syntax|javascript|1384288|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This one worked for me:

<pre><code>var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
 // We're at the bottom.
}
</code></pre>

blocks|key|1169303|text|$('.block').scrollTop($('.block')[0].scrollHeight);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1169304|当新消息到达时，我使用此代码来滚动聊天。|unstyled|1169305|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('.block').scrollTop($('.block')[0].scrollHeight);
</code></pre>

I use this code to scroll the chat when new messages arrive.

How do I use jquery to scroll right down to the bottom of an iframe or page?

jQuery Scroll to bottom of page/iframe

jQuery

如何使用jquery向下滚动到iframe或页面的底部？

问jQuery滚动到页面底部/iframe
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery滚动到页面底部/iframeEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery滚动到页面底部/iframe
EN