Menu
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());
915
Of course, you can also click and drag the scroll bar on the side of the page, but that's a slow and imprecise option–especially if you're using a laptop touchpad. No, by far the best way to jump to the top or bottom of a Web page is by tapping your Home or End key, respectively.
To auto scroll a page from top to bottom we can use scrollTop() and height() method in jquery. In this method pass the document's height in scrollTop method to scroll.
Use scrollTop and scrollHeight to Scroll to the Bottom of Div in JavaScript. A combination of scrollTop and scrollHeight can cause an element to scroll to the bottom because scrollTop determines the number of pixels for a vertical scroll. In contrast, scrollHeight is the element's height (visible and non-visible parts) ...
window. scrollTo(0, document. body. scrollHeight);
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/
134
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
