How To Scroll Top Or Bottom Of Document Using JavaScript

There are different methods to scroll HTML documents using JavaScript. You can scroll Top or Bottom of the document along with scrolling in any part or view any element in the document using JavaScript.

To scroll the document using JavaScript, there is a scrollTo() method in window object. It takes the X and Y coordinates of a point and sets these as the scrollbar offsets.

The scrollTo() method scrolls the window so that the specified point is in the upper left corner of the viewport. If you specify a point that is too close to the bottom or too close to the right edge of the document, the browser will move it as close as possible to the upper left corner.

Table of Contents

How to Scroll Bottom of Document Using JavaScript

You can use the following set of JavaScript codes that scroll the browser to the bottom-most page of the document.

var documentHeight=documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0, documentHeight-viewportHeight);

Here the first variable documentHeight specifies the read-only offsetHeight properties of any HTML element. It will return its on-screen height, in CSS pixels. The returned size includes the element border and padding but not margin. And the second variable, viewportHeight specifies the height of the viewport. It is obtained from the innerHeight property of window object.

You can execute this code on onclick event of JavaScript hyperlink or on onclik event of any button or text as given below.

function gobottom(){
var documentHeight=document.documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0,documentHeight-viewportHeight);
}

You can call this function gobottom() within the HTML file as below.

<input type="button" value="Go To Bottom" onclick="gobottom();">

On the other way, you can execute onclick event of a button with assigning a function on onload event of the window as below.

<script>
window.onload=function(){
var bottom=document.getElementById('bottom');
bottom.onclick=function(){
var documentHeight=document.documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0,documentHeight-viewportHeight);}
</script>

You can call this function by placing the id attribute within the HTML file as below.

<input type="button" value="Go To Bottom" id="bottom">

Preview:

How to Scroll Top of Document Using JavaScript

You can use the following JavaScript code that scrolls the browser to the topmost page of the document.

window.scroll(0,0);

Additionally, execute this code on onclick event of JavaScript hyper-link or on onclick event of any button or text as given below.

<script>
window.onload=function(){
var top=document.getElementById('top');
top.onclick=function(){window.scrollTo(0,0);}
</script>

You can call this function by placing the id attribute within HTML file as given below.

<input type="button" value="Go To Top" id="top">

Preview:

Scrolling the Document Automatically Using JavaScript

You can scroll the document automatically using scrollBy() method which is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scrollbar offsets.

For example, you can use the following code to scroll 10 pixels down every 200ms.

javascript:void setInterval(function(){scrollBy(0,10)}, 200);

Scrolling the Document to View Certain Element Using JavaScript

Instead of scrolling to a numeric location in the document, you can just scroll that a certain element in the document is visible. It can be done easily scrollIntoView() method on the desired HTML element. This method ensures that the element on which it is invoked is visible in the viewport.

By default, the scrollIntoView() method tries to put the top edge of the element at or near the top of the viewport. The browser will also scroll the viewport horizontally as needed to make the element visible.

Read Next: How to Use jQuery With HTML?

Please follow and like us: