jQuery scroll to bottom of page

Question

Im using the following to scroll to the top of a page when you click a certain link.

$('.myLinkToTop').click(function () {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

I want to make another link that scrolls to the bottom of the page. The following is working OK. I think it tries to scroll 1000px down the page, so if the page is shorter then it scrolls faster than it should, and if the page is taller then it wont go all the way to the bottom. How can I replace '1000' with the window height? Thanks

$('.myMenuLink').click(function () {
    $('html, body').animate({scrollTop:1000}, 'slow');
    return false;
});

I know that this code jumps to the bottom of the page, but it doenst scroll smoothly like I need:

$(document).scrollTop($(document).height());

you should be using jquery easing plugin and pass the parameter like swing , easein or easeout whatever you like for smooth transition — defau1t, Nov 27 '12 at 11:29
Just a reminder, the [currently accepted answer](http://stackoverflow.com/a/13583503/383904) is actually incorrect / incomplete (see comment). — Roko C. Buljan, Mar 22 '16 at 16:27

score 37 · Accepted Answer · edited Sep 11 '14 at 11:30

37

Your requirement to animate and move to bottom of document can be achieved by the code below

HTML

<html>
<head>
</head>
<body>
    <div style="height:1500px">
        <button class="myLinkToTop" id="but1" >1</button>
    </div>
        <button class="myMenuLink" id="but1" >2</button>
</body>
</html>

JS

$('.myLinkToTop').click(function () {
    $('html, body').animate({
        scrollTop: $(document).height()
    }, 'slow');
    return false;
});

$('.myMenuLink').click(function () {
    $('html, body').animate({
        scrollTop:0
    }, 'slow');
    return false;
});

Refer to this link

http://jsfiddle.net/q6Wsp/6/

edited Sep 11 '14 at 11:30

GillesC

10,647
3
40
55

answered Nov 27 '12 at 11:43

Sridhar Narasimhan

2,643
2
17
25

2

That's an **incorrect example**. While animating to bottom the **easing** has no time to properly finish (slowdown) cause of wrong height calculations - instead it hits bottom at full speed. – Roko C. Buljan Mar 22 '16 at 16:24

Roko C. Buljan · Answer 2 · 2016-03-22T16:18:45.370

11

You need to substract the viewport height from the scrollHeight :

$('#goToBottom').click(function(){

  var WH = $(window).height();  
  var SH = $('body').prop("scrollHeight");
  $('html, body').stop().animate({scrollTop: SH-WH}, 1000);

});

body{height:2000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="goToBottom">GO TO BOTTOM</button>

edited Mar 22 '16 at 16:18

answered Nov 27 '12 at 11:40

Roko C. Buljan

196,159
39
305
313

score 4 · Answer 3 · answered Nov 27 '12 at 11:33

Try this code

$(function () {
     $('#scrlBotm').click(function () {
         $('html, body').animate({
             scrollTop: $(document).height()
         },
         1500);
         return false;
     });

     $('#scrlTop').click(function () {
         $('html, body').animate({
             scrollTop: '0px'
         },
         1500);
         return false;
     });
 });

score 4 · Answer 4 · answered Jul 19 '14 at 17:27

4

For very long html documents scrollTop:$(document).height() fails, in these cases you can use:

$('html, body').animate({
    scrollTop: $('#endOfPage').offset().top
}, 1000);

at the end of page put a:

<div id="endOfPage">&nbsp;</div>

answered Jul 19 '14 at 17:27

surfealokesea

4,971
4
28
38

score 2 · Answer 5 · answered Sep 11 '14 at 11:21

code jumps to the bottom of the page With smoothly:

$(document).ready(function () {

$('#selector').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1000); }); });

With this code easy to scroll page down.

score 0 · Answer 6 · answered Nov 21 '17 at 10:10

0

To scroll to the bottom of page try this:

        $('html, body').animate({
            scrollTop: $('html, body').height()
        }, 'slow');

answered Nov 21 '17 at 10:10

Mohamad Hamouday

2,070
23
20

jQuery scroll to bottom of page

6 Answers6

Linked