JavaScript Page scroll, scroll a web page from bottom to top smoothly
While surfing on the net I have interacted with a script. When I clicked on link "Top" located at the bottom of the web page. Page scroll smoothly and take me to the top of the page. In this article we are going to see working of JavaScript to scroll a web page from bottom to top smoothly. First of all take a look on working of the Page scroll.
Below piece of code will do it for you. As this script is not written by me, I like offer whole credit to its orignal author. You have to put this script any whare in the <head> or <body> section to add javascript page scroll effect to your page.
<script type="text/javascript">
//whole credits are devoted to orignal author
//
//Use: Call function goto_top()
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer() {
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
//alert(y);
var moveby = 15; // set this to control scroll seed. minimum is fast
y -= Math.ceil(y * moveby / 100);
if (y < 0)
y = 0;
if (goto_top_type == 1)
document.documentElement.scrollTop = y;
else
document.body.scrollTop = y;
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top() {
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop)
goto_top_type = 1;
else if (document.body && document.body.scrollTop)
goto_top_type = 2;
else
goto_top_type = 0;
if (goto_top_type > 0)
goto_top_itv = setInterval('goto_top_timer()', 25);
}
}
</script>
How the Script works?
You have to call function goto_top() to use this script. Let's take a look on working of the script. Here two variables goto_top_type(-1) and goto_top_itv(0) are defined which help in controlling the scrolling effect. Initially when function goto_top() called, goto_top_itv is 0 and new value of goto_top_type get set a value.
Here The document object represents both the content viewed in the browser window or frame and the other content of the HTML file loaded into the window or frame. Thus, all information from the head portion of the file is also part of the document object. All references to elements must include a reference to the document object. The document object has no name other than its hard-wired object name: document.
The body object reflects the body element, which is distinct from the document object. The body object refers to just the element and its nested content. There can be only one body element in an HTML page, so both the IE and W3C DOMs provide a shortcut reference to the object, document.body. document.body.scrollTop Provide the distance in pixels between the actual top edge of the element's physical content and the top edge of the visible portion of the content. When the content is not scrolled, scrollTop values is set to zero.
If the goto_top_type is greater than zero function goto_top_timer() get call after 25 milisecond. In the function goto_top_timer() variable y get set to distance in pixels. Another Variable moveby is set to 15 which defines the step size of the smooth scroll. Every time after when function get call a new value is set for scrollTop property. Setting the scrollTop property to 30, scrolls the document upward by 30 pixels in the window. This process get carried out till the page reach to top and document.documentElement.scrollTop or document.body.scrollTop set to zero. As the function get called after a 25 milisecond we feels effect of smoothly page scroll. To see how the process actually work remove comment from //alert(y); and time Interval to 1000 milisecond (means setInterval('goto_top_timer()', 1000);)
Implementing Script
Implementation of script is quite simple just user it on onclick event.
<p><a href="javascript:void(0)" onclick="goto_top()"><img src="/goto_top.gif" alt="Top" border="0" /></a></p>
Hope this script will help you to add JavaScript Page scroll effect to your webpage to scroll it from bottom to top smoothly.
TrackBack URI for this entry
Subscribe to this comment's feed
written by Steve Yakoban, March 06, 2009
