I have a list of questions. When I click on the first question, it should automatically take me to a specific element at the bottom of the page.

How can I do this with jQuery?

27 Answers

jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:

window.scrollTo(0, document.body.scrollHeight); 

Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it's scroll height instead.

window.scrollTo(0, document.querySelector(".scrollingContainer").scrollHeight);

You can tie that to the onclick event of your question (i.e. <div onclick="ScrollToBottom()" ...).

Some additional sources you can take a look at:

To scroll entire page to the bottom:

const scrollingElement = (document.scrollingElement || document.body); scrollingElement.scrollTop = scrollingElement.scrollHeight; 

You can view the demo here

To scroll a specific element to the bottom:

const scrollToBottom = (id) => { const element = document.getElementById(id); element.scrollTop = element.scrollHeight; } 

Here is the demo

And here's how it works:

Ref: scrollTop, scrollHeight, clientHeight

UPDATE: Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see:

Vanilla JS implementation:

element.scrollIntoView(false); 

You can use this to go down the page in an animation format.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast"); 

Below should be the cross browser solution. It has been tested on Chrome, Firefox, Safari and IE11

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 

window.scrollTo(0,document.body.scrollHeight); doesn't work on Firefox, at least for Firefox 37.0.2

one liner to smooth scroll to the bottom

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" }); 

To scroll up simply set top to 0

Sometimes the page extends on scroll to buttom (for example in social networks), to scroll down to the end (ultimate buttom of the page) I use this script:

var scrollInterval = setInterval(function() { document.documentElement.scrollTop = document.documentElement.scrollHeight; }, 50); 

And if you are in browser's javascript console, it might be useful to be able to stop the scrolling, so add:

var stopScroll = function() { clearInterval(scrollInterval); }; 

And then use stopScroll();.

If you need to scroll to particular element, use:

var element = document.querySelector(".element-selector"); element.scrollIntoView(); 

Or universal script for autoscrolling to specific element (or stop page scrolling interval):

var notChangedStepsCount = 0; var scrollInterval = setInterval(function() { var element = document.querySelector(".element-selector"); if (element) { // element found clearInterval(scrollInterval); element.scrollIntoView(); } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { // no element -> scrolling notChangedStepsCount = 0; document.documentElement.scrollTop = document.documentElement.scrollHeight; } else if (notChangedStepsCount > 20) { // no more space to scroll clearInterval(scrollInterval); } else { // waiting for possible extension (autoload) of the page notChangedStepsCount++; } }, 50); 

You can use this function wherever you need to call it:

function scroll_to(div){ if (div.scrollTop < div.scrollHeight - div.clientHeight) div.scrollTop += 10; // move down } 

jquery.com: ScrollTo

CSS-Only?!

An interesting CSS-only alternative:

display: flex; flex-direction: column-reverse; 

It's not bullet-proof but I've found it helpful in several situations.

Documentation: flex, flex-direction

Demo:

var i=0, words='Lorem Ipsum & foo bar or blah'.split(' ') setInterval(function(){ demo.innerHTML+=words[i++ % words.length]+' '; }, 250)

#demo{ display: flex; flex-direction: column-reverse; overflow-y: scroll; border:3px solid black; width:150px; height:150px; } body{ font-family:arial, sans-serif; font-size:15px; }

&#x1f43e; Autoscrolling demo:<div id='demo'></div>

you can do this too with animation, its very simple

$('html, body').animate({ scrollTop: $('footer').offset().top //scrollTop: $('#your-id').offset().top //scrollTop: $('.your-class').offset().top }, 'slow'); 

hope helps, thank you

So many answers trying to calculate the height of the document. But it wasn't calculating correctly for me. However, both of these worked:

jquery

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

or just js

 window.scrollTo(0,9999); 

A simple way if you want to scroll down to a specific element.

Call this function whenever you want to scroll down.

function scrollDown() { document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight }

ul{ height: 100px; width: 200px; overflow-y: scroll; border: 1px solid #000; }

<ul id='scroll'> <li>Top Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Bottom Here</li> <li>Bottom Here</li> </ul> <br /> <button onclick='scrollDown()'>Scroll Down</button>

Here is a method that worked for me:

Expected outcome:

• No scroll animation
• Loads at bottom of page on first load
• Loads on bottom of page for all refreshes

Code:

<script> function scrollToBottom() { window.scrollTo(0, document.body.scrollHeight); } history.scrollRestoration = "manual"; window.onload = scrollToBottom; </script> 

Why this may work over other methods:

Browsers such as Chrome have a built-in preset to remember where you were on the page, after refreshing. Just a window.onload doesn't work because your browser will automatically scroll you back to where you were before refreshing, AFTER you call a line such as:

window.scrollTo(0, document.body.scrollHeight); 

That's why we need to add:

history.scrollRestoration = "manual"; 

before the window.onload to disable that built-in feature first.

References:

Documentation for window.onload:

Documentation for window.scrollTo:

Documentation for history.scrollRestoration:

You can attach any id to reference attribute href of link element:

<a href="#myLink"> Click me </a> 

In the example above when user clicks Click me at the bottom of page, navigation navigates to Click me itself.

You may try Gentle Anchors a nice javascript plugin.

Example:

function SomeFunction() { // your code // Pass an id attribute to scroll to. The # is required Gentle_Anchors.Setup('#destination'); // maybe some more code } 

Compatibility Tested on:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux untested but should be fine with Firefox at least

Late to the party, but here's some simple javascript-only code to scroll any element to the bottom:

function scrollToBottom(e) { e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height; } 

For Scroll down in Selenium use below code:

Till the bottom drop down, scroll till the height of the page. Use the below javascript code that would work fine in both, JavaScript and React.

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", ""); 

Here's my solution:

 //**** scroll to bottom if at bottom function scrollbottom() { if (typeof(scr1)!='undefined') clearTimeout(scr1) var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight; if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50) scr1=setTimeout(function(){scrollbottom()},200) } scr1=setTimeout(function(){scrollbottom()},200) 

I have an Angular app with dynamic content and I tried several of the above answers with not much success. I adapted @Konard's answer and got it working in plain JS for my scenario:

HTML

<div> <button onClick="scrollToBottom()">Scroll to Bottom</button> <div> <div> <br> <h4>Details for Customer 1</h4> <hr> <!-- sequence Id --> <div> <input type="text" placeholder="ID"> </div> <!-- name --> <div> <input type="text" placeholder="Name"> </div> <!-- description --> <div> <textarea type="text" placeholder="Description" ></textarea> </div> <!-- address --> <div> <input type="text" placeholder="Address"> </div> <!-- postcode --> <div> <input type="text" placeholder="Postcode"> </div> <!-- Image --> <div> <img> <div> <label>{{'Choose file...'}}</label> </div> </div> <!-- Delete button --> <div> <hr> <div> <div> <button title="Click to save">Save</button> <button title="Click to update">Update</button> </div> <div> <button title="Click to remove">Remove</button> </div> </div> <hr> </div> </div> </div> </div> 

CSS

body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } 

JS

function scrollToBottom() { scrollInterval; stopScroll; var scrollInterval = setInterval(function () { document.documentElement.scrollTop = document.documentElement.scrollHeight; }, 50); var stopScroll = setInterval(function () { clearInterval(scrollInterval); }, 100); } 

Tested on the latest Chrome, FF, Edge, and stock Android browser. Here's a fiddle:

I found a trick to make it happen.

Put an input type text at the bottom of the page and call a jquery focus on it whenever you need to go at the bottom.

Make it readonly and nice css to clear border and background.

If any one searching for Angular

you just need to scroll down add this to your div

 #scrollMe [scrollTop]="scrollMe.scrollHeight" <div #scrollMe [scrollTop]="scrollMe.scrollHeight"> </div> 

This will guaranteed scroll to the bottom

Head Codes

<script src=""></script> <script language="javascript" type="text/javascript"> function scrollToBottom() { $('#html, body').scrollTop($('#html, body')[0].scrollHeight); } </script> 

Body code

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a> 

I've had the same issue. For me at one point in time the div's elements were not loaded entirely and the scrollTop property was initialized with the current value of scrollHeight, which was not the correct end value of scrollHeight.

My project is in Angular 8 and what I did was:

1. I used viewchild in order to obtain the element in my .ts file.
2. I've inherited the AfterViewChecked event and placed one line of code in there which states that the viewchild element has to take into the scrollTop value the value of scrollHeight (this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement.scrollHeight;)

The AfterViewChecked event fires a few times and it gets in the end the proper value from scrollHeight.

We can use ref and by getElementById for scrolling specific modal or page .

 const scrollToBottomModel = () => { const scrollingElement = document.getElementById("post-chat"); scrollingElement.scrollTop = scrollingElement.scrollHeight; }; 

In the modal body you can call above function

 <Modal.Body className="show-grid" scrollable={true} style={{ maxHeight: "calc(100vh - 210px)", overflowY: "auto", height: "590px", }} ref={input => scrollToBottomModel()} > 

will work this

A simple example with jquery

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

window.scrollTo(0,1e10);

always works.

1e10 is a big number. so its always the end of the page.

A picture is worth a thousand words:

The key is:

document.documentElement.scrollTo({ left: 0, top: document.documentElement.scrollHeight - document.documentElement.clientHeight, behavior: 'smooth' }); 

It is using document.documentElement, which is the <html> element. It is just like using window, but it is just my personal preference to do it this way, because if it is not the whole page but a container, it works just like this except you'd change document.body and document.documentElement to document.querySelector("#container-id").

Example:

let cLines = 0; let timerID = setInterval(function() { let elSomeContent = document.createElement("div"); if (++cLines > 33) { clearInterval(timerID); elSomeContent.innerText = "That's all folks!"; } else { elSomeContent.innerText = new Date().toLocaleDateString("en", { dateStyle: "long", timeStyle: "medium" }); } document.body.appendChild(elSomeContent); document.documentElement.scrollTo({ left: 0, top: document.documentElement.scrollHeight - document.documentElement.clientHeight, behavior: 'smooth' }); }, 1000);

body { font: 27px Arial, sans-serif; background: #ffc; color: #333; }

You can compare the difference if there is no scrollTo():

let cLines = 0; let timerID = setInterval(function() { let elSomeContent = document.createElement("div"); if (++cLines > 33) { clearInterval(timerID); elSomeContent.innerText = "That's all folks!"; } else { elSomeContent.innerText = new Date().toLocaleDateString("en", { dateStyle: "long", timeStyle: "medium" }); } document.body.appendChild(elSomeContent); }, 1000);

body { font: 27px Arial, sans-serif; background: #ffc; color: #333; }