jquery

How to scroll to bottom of page?


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

Solution

  • 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/