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

Question

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.

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

So I am asking how to know: $(window).scrollBottom()

score 153 · Accepted Answer · answered Jan 11 '11 at 07:47

153

var scrollBottom = $(window).scrollTop() + $(window).height();

answered Jan 11 '11 at 07:47

David Tang

86,742
28
159
145

19

you'd think if its as simple as this, that it could be included in the core framework as .scrollBottom(). Strange.. – Curt Jan 11 '11 at 09:04
39

scroll `Top` is # of vertical pixels from document `Top` to visible window `Top`. As an exact opposite to scroll `Top`, scroll `Bottom` should measure # of vertical pixels from document `Bottom` to the visible window `Bottom` (i.e. Alfred's answer below). What *this* gives is the # of vertical pixel from document `_top_` to the visible window `Bottom`. It is useful for sure, though can't call it the opposite to ScrollBottom (I know this is a marked answer but for future readers like myself) – DeepSpace101 Feb 14 '13 at 20:58
1

This solution won't work if the distance from the top can vary. For example, if I have a
that has to be a certain distance from the bottom of the page and the page has expandable/collapsible items, it's going to change the body height and therefore the distance from the bottom.
– crash springfield Apr 28 '17 at 19:10
@crashspringfield Actually that's a different question. This question is about placing things near the bottom of the viewport not the bottom of the page. – iPherian May 06 '17 at 00:45

score 89 · Answer 2 · answered May 03 '11 at 14:03

I would say that a scrollBottom as a direct opposite of scrollTop should be:

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

Here is a small ugly test that works for me:

// 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: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //

Perfect, this is what i was looking for... Thank you! – ℛɑƒæĿᴿᴹᴿ Nov 20 '17 at 13:20 — ℛɑƒæĿᴿᴹᴿ, Nov 20 '17 at 13:20

score 9 · Answer 3 · answered May 08 '15 at 15:04

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)

$.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);

score 4 · Answer 4 · edited Sep 02 '14 at 20:35

4

var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

I think it is better to get bottom scroll.

edited Sep 02 '14 at 20:35

pb2q

54,061
17
135
139

answered Nov 30 '12 at 07:47

snoop_dog · Answer 5 · 2016-05-03T03:37:11.143

2

This will scroll to the very top:

$(window).animate({scrollTop: 0});

This will scroll to the very bottom:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

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

edited May 03 '16 at 03:37

answered Apr 30 '16 at 17:24

snoop_dog

31
6

1

How to animate to the bottom of a fixed height div with `overflow-y: auto` so that it actually scrolls to the bottom of the text (which extends beyond the height of the div)? – user1063287 Jul 30 '20 at 05:40
1

Update to my question in case it helps anyone else: I think the property to use might be `scrollHeight` - see: https://stackoverflow.com/q/7381817 – user1063287 Jul 30 '20 at 06:19

score 0 · Answer 6 · edited Jun 03 '16 at 06:54

0

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

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

edited Jun 03 '16 at 06:54

Dovydas Šopa

2,242
8
24
31

answered Jun 03 '16 at 05:59

SantoshK

1,531
13
20

score 0 · Answer 7 · answered Jul 13 '18 at 08:36

// 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() > 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;
});

score 0 · Answer 8 · answered Jan 04 '20 at 18:03

0

try:

 $(window).scrollTop( $('body').height() );

answered Jan 04 '20 at 18:03

user944550

49
1
5

gzenakos · Answer 9 · 2020-05-08T11:48:18.697

0

var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();

edited May 08 '20 at 11:48

answered May 07 '20 at 14:49

gzenakos

1
1

2

Please avoid code only answer and provide some explanation. – Mickael B. May 08 '20 at 13:35

score -3 · Answer 10 · answered Jun 20 '17 at 20:10

-3

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:

document.body.scrollTop = 100000;

answered Jun 20 '17 at 20:10

unplugged

489
5
8

This won't work on pages longer than 100000 pixel. That might seem to be quite an edge case, however in cases like endless scrolling pages it is not that improbable. If you really want a solution without jquery, [this](https://stackoverflow.com/a/11715670/1406321) answer might be a better option. – lucash Jun 20 '17 at 20:31
ya, the point is to use a number as large as possible say 999999999999999999999999999999. – unplugged Jun 21 '17 at 13:06

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

10 Answers10

Linked

Related