Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Scroll To bottom of the page

After my page is done loading. I want jQUery to nicely scroll to the bottom of the page, animating quickly, not a snap/jolt.

Do iI need a plugin like ScrollTo for that? or is that built into jQuery some how?

like image 784
AnApprentice Avatar asked Nov 22 '10 19:11

AnApprentice


People also ask

How do I automatically scroll to the bottom of the page?

To use you just need to press CTRL+ Left click of your mouse and drag the mouse a bit in the direction you want to scroll the page. For example, if you want to scroll up to the page automatically, click CTRL+ left click and slightly move your mouse upwards, the tool will start scrolling up the page.

How do you scroll automatically to the bottom of the page using jquery?

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.

How do you scroll to the bottom in JavaScript?

Use element. scrollintoview() to Scroll to Bottom of Div in JavaScript. The Element. scrollIntoView() method will scroll an element to be visible to the user.

How do I check if a div is scrolled to the bottom?

To detect when a user scrolls to bottom of div with React, we can check if the sum of the scrollTop and clientHeight properties of a scrollable element is equal to the scrollHeight property of the same element. We call the useRef hook to create a ref and we assign the returned ref to the inner div, which is scrollable.


2 Answers

You can just animate to scroll down the page by animating the scrollTop property, no plugin required, like this:

$(window).load(function() {   $("html, body").animate({ scrollTop: $(document).height() }, 1000); }); 

Note the use of window.onload (when images are loaded...which occupy height) rather than document.ready.

To be technically correct, you need to subtract the window's height, but the above works:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() }); 

To scroll to a particular ID, use its .scrollTop(), like this:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000); 
like image 157
Nick Craver Avatar answered Sep 21 '22 03:09

Nick Craver


something like this:

var $target = $('html,body');  $target.animate({scrollTop: $target.height()}, 1000); 
like image 24
Josiah Ruddell Avatar answered Sep 21 '22 03:09

Josiah Ruddell