السبت، 28 فبراير 2015

How to Scroll Top or Bottom of Document Using JavaScript

There are different methods to scroll HTML document using JavaScript, You can scroll the document to Top, Bottom or in any part or to view any element in the document using JavaScript.

To scroll the document using JavaScript, there is a scrollTo() method in window object which 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 view-port. 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.

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 return its on screen height, in CSS pixels and the returned size include the element border and padding but not margin.

And the second variable, viewportHeight specifies the height of viewport, which is obtained from 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 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:




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.



Related Search Terms

Related Posts:

مرسلة بواسطة في
التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)