How to Scroll Bottom of Document Using JavaScript
var documentHeight=documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0, documentHeight-viewportHeight);
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 HTML file as below.
<input type="button" value="Go To Bottom" onclick="gobottom();">
On the other way, you can execute onclick event of button with assigning a function on onload event of 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 id attribute within HTML file as below.
<input type="button" value="Go To Bottom" id="bottom">
Preview:
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);}
var top=document.getElementById(‘top’);
top.onclick=function(){window.scrollTo(0,0);}
};
How to Scroll Top of Document Using JavaScript
You can use the following JavaScript code that scroll the browser to the top most page of the document.
window.scroll(0,0);
You can 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 id attribute within HTML file as given below.
<input type="button" value="Go To Top" id="top">
Preview:
How to Scroll 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);
How to Scroll Document to View Certain Element Using JavaScript
Instead of scrolling to a numeric location in 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 and this method insures 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.
