blocks|key|825837|text|var+scrollBottom+=+$(window).scrollTop()+%2B+$(window).height();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|825838|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var scrollBottom = $(window).scrollTop() + $(window).height();
</code></pre>


blocks|key|1040791|text|我想说，作为scrollTop的直接对立面，scrollBottom应该是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1040792|var+scrollBottom+=+$(document).height()+-+$(window).height()+-+$(window).scrollTop();|code-block|syntax|javascript|1040793|这是一个对我有效的小而难看的测试：|1040794|//+SCROLLTESTER+START+//
$('<h1+id="st"+style="position:+fixed;+right:+25px;+bottom:+25px;"></h1>').insertAfter('body');

$(window).scroll(function+()+{
++var+st+=+$(window).scrollTop();
++var+scrollBottom+=+$(document).height()+-+$(window).height()+-+$(window).scrollTop();

++$('#st').replaceWith('<h1+id="st"+style="position:+fixed;+right:+25px;+bottom:+25px;">scrollTop:+'+%2B+st+%2B+'<br>scrollBottom:+'+%2B+scrollBottom+%2B+'</h1>');
});
//+SCROLLTESTER+END+//|1040795|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|$]]

<p>I would say that a scrollBottom as a direct opposite of scrollTop should be:</p>

<pre><code>var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
</code></pre>

<p>Here is a small ugly test that works for me:</p>

<pre><code>// SCROLLTESTER START //
$('&lt;h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"&gt;&lt;/h1&gt;').insertAfter('body');

$(window).scroll(function () {
  var st = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  $('#st').replaceWith('&lt;h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"&gt;scrollTop: ' + st + '&lt;br&gt;scrollBottom: ' + scrollBottom + '&lt;/h1&gt;');
});
// SCROLLTESTER END //
</code></pre>


blocks|key|1040887|text|将来，我已经将scrollBottom变成了一个jquery插件，它的使用方式与scrollTop相同(即，您可以设置一个数字，它将从页面底部滚动该数量，并从页面底部返回像素数，或者，如果没有提供数字，则从页面底部返回像素数)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1040888|$.fn.scrollBottom+=+function(scroll){
++if(typeof+scroll+===+'number'){
++++window.scrollTo(0,$(document).height()+-+$(window).height()+-+scroll);
++++return+$(document).height()+-+$(window).height()+-+scroll;
++}+else+{
++++return+$(document).height()+-+$(window).height()+-+$(window).scrollTop();
++}
}
//Basic+Usage
$(window).scrollBottom(500);|code-block|syntax|javascript|1040889|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|$]]

<p>For the future, I've made scrollBottom into a jquery plugin, usable in the same way that scrollTop is (i.e. you can set a number and it will scroll that amount from the bottom of the page and return the number of pixels from the bottom of the page, or, return the number of pixels from the bottom of the page if no number is provided)</p>

<pre><code>$.fn.scrollBottom = function(scroll){
  if(typeof scroll === 'number'){
    window.scrollTo(0,$(document).height() - $(window).height() - scroll);
    return $(document).height() - $(window).height() - scroll;
  } else {
    return $(document).height() - $(window).height() - $(window).scrollTop();
  }
}
//Basic Usage
$(window).scrollBottom(500);
</code></pre>


blocks|key|825910|text|var+scrollBottom+=
++++$(document).height()+-+$(window).height()+-+$(window).scrollTop();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|825911|我觉得最好做个底卷。|unstyled|825912|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>var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();
</code></pre>

<p>I think it is better to get bottom scroll.</p>


blocks|key|826083|text|这将滚动到最顶部：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826084|$(window).animate({scrollTop:+0});|code-block|syntax|javascript|826085|这将滚动到最底部：|826086|$(window).animate({scrollTop:+$(document).height()+%2B+$(window).height()});|826087|。。如有必要，将窗口更改为所需的容器id或类(用引号括起来)。|826088|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This will scroll to the very top:</p>

<pre><code>$(window).animate({scrollTop: 0});
</code></pre>

<p>This will scroll to the very bottom:</p>

<pre><code>$(window).animate({scrollTop: $(document).height() + $(window).height()});
</code></pre>

<p>.. change window to your desired container id or class if necessary (in quotes).</p>


blocks|key|1041139|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041140|+$(window).scrollTop(+$('body').height()+);|code-block|syntax|javascript|1041141|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|$]]

<p>try:</p>

<pre><code> $(window).scrollTop( $('body').height() );
</code></pre>


blocks|key|826205|text|下面是表格网格的最佳选项滚动到底部，它将滚动到表格网格的最后一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826206|+$('.add-row-btn').click(function+()+{
+++++var+tempheight+=+$('#PtsGrid+>+table').height();
+++++$('#PtsGrid').animate({
+++++++++scrollTop:+tempheight
+++++++++//scrollTop:+$(".scroll-bottom").offset().top
+++++},+'slow');
+});|code-block|syntax|javascript|826207|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|$]]

<p>Here is the best option scroll to bottom for table grid, it will be scroll to the last row of the table grid : </p>

<pre><code> $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid &gt; table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });
</code></pre>


blocks|key|826277|text|//+Back+to+bottom+button
$(window).scroll(function+()+{
++++var+scrollBottom+=+$(this).scrollTop()+%2B+$(this).height();
++++var+scrollTop+=+$(this).scrollTop();
++++var+pageHeight+=+$('html,+body').height();//Fixed

++++if+($(this).scrollTop()+>+pageHeight+-+700)+{
++++++++$('.back-to-bottom').fadeOut('slow');
++++}+else+{
++++++++if+($(this).scrollTop()+<+100)+{
++++++++++++$('.back-to-bottom').fadeOut('slow');
++++++++}
++++++++else+{
++++++++++++$('.back-to-bottom').fadeIn('slow');
++++++++}
++++}
});
$('.back-to-bottom').click(function+()+{
++++var+pageHeight+=+$('html,+body').height();//Fixed
++++$('html,+body').animate({+scrollTop:+pageHeight+},+1500,+'easeInOutExpo');
++++return+false;
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|826278|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// Back to bottom button
$(window).scroll(function () {
    var scrollBottom = $(this).scrollTop() + $(this).height();
    var scrollTop = $(this).scrollTop();
    var pageHeight = $('html, body').height();//Fixed

    if ($(this).scrollTop() &gt; pageHeight - 700) {
        $('.back-to-bottom').fadeOut('slow');
    } else {
        if ($(this).scrollTop() &lt; 100) {
            $('.back-to-bottom').fadeOut('slow');
        }
        else {
            $('.back-to-bottom').fadeIn('slow');
        }
    }
});
$('.back-to-bottom').click(function () {
    var pageHeight = $('html, body').height();//Fixed
    $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
    return false;
});
</code></pre>


blocks|key|1041153|text|var+scrolltobottom+=+document.documentElement.scrollHeight+-+$(this).outerHeight()+-+$(this).scrollTop();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1041154|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
</code></pre>


blocks|key|1041183|text|对于我的页面中的项目：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041184|document.getElementById(elementId).scroll(0,
+document.getElementById(elementId).scrollHeight);|code-block|syntax|javascript|1041185|​|1041186|function+scrollBottum(elementId){
+++document.getElementById(elementId).scroll(0,+document.getElementById(elementId).scrollHeight);
}|1041187|<html><div><button+onclick="scrollBottum('myCart')">Click+me+to+scroll</button></div>
<div+id="myCart"+style="height:+50px;+overflow-y:+scroll;">
++<div>1:+A+First+...</div>
++<div>2:+B</div>
++<div>3:+C</div>
++<div>4:+D</div>
++<div>5:+E</div>
++<div>6:+F</div>
++<div>7:+LAST+!!</div>
</div>
</html>|1041188|1041189|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>For an item in my page :</p>
<pre><code>document.getElementById(elementId).scroll(0,
 document.getElementById(elementId).scrollHeight);
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function scrollBottum(elementId){
   document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;&lt;div&gt;&lt;button onclick="scrollBottum('myCart')"&gt;Click me to scroll&lt;/button&gt;&lt;/div&gt;
&lt;div id="myCart" style="height: 50px; overflow-y: scroll;"&gt;
  &lt;div&gt;1: A First ...&lt;/div&gt;
  &lt;div&gt;2: B&lt;/div&gt;
  &lt;div&gt;3: C&lt;/div&gt;
  &lt;div&gt;4: D&lt;/div&gt;
  &lt;div&gt;5: E&lt;/div&gt;
  &lt;div&gt;6: F&lt;/div&gt;
  &lt;div&gt;7: LAST !!&lt;/div&gt;
&lt;/div&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1041231|text|我试过了，效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041232|​|1041233|scrollrev(){
++++let+x:any=+document.getElementById('chat')
++++x.scrollTop+=+-9000;
++}|code-block|syntax|javascript|1041234|1041235|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>i try that and it work very well</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>scrollrev(){
    let x:any= document.getElementById('chat')
    x.scrollTop = -9000;
  }</code></pre>
</div>
</div>
</p>


blocks|key|826454|text|我试了试那个代码，它工作了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826455|​|826456|+//+scroll+top
+scroll(){
++++let+x:any=+document.getElementById('chat')
++++x.scrollTop+=+9000;
++}
++//+scroll+buttom
++scrollrev(){
++++let+x:any=+document.getElementById('chat')
++++x.scrollTop+=+-9000;
++}|code-block|syntax|javascript|826457|826458|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>i try that code and it work</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> // scroll top
 scroll(){
    let x:any= document.getElementById('chat')
    x.scrollTop = 9000;
  }
  // scroll buttom
  scrollrev(){
    let x:any= document.getElementById('chat')
    x.scrollTop = -9000;
  }</code></pre>
</div>
</div>
</p>


blocks|key|826270|text|这是一个快速的技巧:只需将滚动值分配给一个非常大的数字。这将确保页面滚动到底部。使用纯javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826271|document.body.scrollTop+=+100000;|code-block|syntax|javascript|826272|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|$]]

<p>This is a quick hack: just assign the scroll value to a very large number. This will ensure that the page is scrolled to the bottom.
Using plain javascript:</p>

<pre><code>document.body.scrollTop = 100000;
</code></pre>


<p>I want to place an element to the bottom of the page whenever the user scrolls the page. It's like "fixed position" but I can't use "position: fixed" css as many of my clients' browser can't support that.</p>

<p>I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport?</p>

<p>So I am asking how to know: $(window).scrollBottom() </p>


jquery: $(window).scrollTop() but no $(window).scrollBottom()

容器

每当用户滚动页面时，我希望在页面底部放置一个元素。它类似于“固定位置”，但我不能使用“位置:固定”css，因为我的许多客户的浏览器都不支持它。我注意到jquery可以获取当前视区的顶部位置，但是如何获取滚动视区的底部呢？所以我在问如何知道：$(window).scrollBottom()

问jquery：$(window).scrollTop()，但没有$(window).scrollBottom()
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery：$(window).scrollTop()，但没有$(window).scrollBottom()EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery：$(window).scrollTop()，但没有$(window).scrollBottom()
EN