JS for smooth scroll to the bottom of the page

With pure JS:

 window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }) 

and to the top as:

 window.scrollTo({ top: 0, behavior: 'smooth' }) 

// Scroll smoothly to the bottom domElement.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth', }) 

All options for scrollTo are:

• top: number
• left: number
• behavior: 'smooth' or behavior: 'auto'

For a more comprehensive list of methods for smooth scrolling, see my answer here.

To scroll to the bottom of the page, the y-position can be set to document.scrollingElement.scrollHeight.

For scrolling to a certain position in an exact amount of time, window.requestAnimationFrame can be put to use, calculating the appropriate current position each time. setTimeout can be used to a similar effect when requestAnimationFrame is not supported.

/* @param pos: the y-position to scroll to (in pixels) @param time: the exact amount of time the scrolling will take (in milliseconds) */ function scrollToSmoothly(pos, time) { var currentPos = window.pageYOffset; var start = null; if(time == null) time = 500; pos = +pos, time = +time; window.requestAnimationFrame(function step(currentTime) { start = !start ? currentTime : start; var progress = currentTime - start; if (currentPos < pos) { window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos); } else { window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time)); } if (progress < time) { window.requestAnimationFrame(step); } else { window.scrollTo(0, pos); } }); } 

function scrollToSmoothly(pos, time) { var currentPos = window.pageYOffset; var start = null; if(time == null) time = 500; pos = +pos, time = +time; window.requestAnimationFrame(function step(currentTime) { start = !start ? currentTime : start; var progress = currentTime - start; if (currentPos < pos) { window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos); } else { window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time)); } if (progress < time) { window.requestAnimationFrame(step); } else { window.scrollTo(0, pos); } }); } document.querySelector('button').addEventListener('click', function(e){ scrollToSmoothly(document.scrollingElement.scrollHeight, 1000); });

html, body { height: 5000px; }

<button>Scroll to bottom</button>

The SmoothScroll.js library can be used as well, which handles more complex cases such as smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more.

smoothScroll({yPos: 'end', duration: 1000}); 

document.querySelector('button').addEventListener('click', function(e){ smoothScroll({yPos: 'end', duration: 1000}); });

html, body { height: 5000px; }

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/[email protected]/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script> <button>Scroll to bottom</button>

The accepted answer and others are correct, but wanted to add another usecase that might help someone.

In some cases, you'd need to do the scrolling inside a setTimeout()'s callback with a short delay.

function scrollToBottom() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); } setTimeout(function() { scrollToBottom(); }, 100); 

For example: you have a <button> which adds a <div> element to the bottom of the page when clicked on, and you want to scroll to the bottom so the user can see this new div. In this case, sometimes (depends on the event-loop behavior), you'd need to do the scroll inside a setTimeout() because the same action that triggers the scroll actually changes the value of document.body.scrollHeight. By delaying it, you make it use the new updated value of document.body.scrollHeight after the div was added.