Deprecated: Function eregi() is deprecated in /home/content/48/9096548/html/xfunda.com/templates/ja_barite/ja_menus/Base.class.php on line 62
JavaScript Page scroll, scroll a web page from bottom to top smoothly

Excellent Fundamental...!!!

 
  • Increase font size
  • Default font size
  • Decrease font size
  • default color
  • green color
  • blue color

JavaScript Page scroll, scroll a web page from bottom to top smoothly

E-mail Print PDF

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(0)
Comments (5)Add Comment
Really superb
written by sheik, February 21, 2009
It is really useful and solved my problem...
Nice Job
written by Steve Yakoban, March 06, 2009
Just a simple idea, but it ads a nice touch to a site!
How do you scroll down?
written by Garrett, March 14, 2009
Hey,

How can you modify this script so that it will scroll down?

Garrett
Great Article.
written by sanjay, April 17, 2009
Realy it's great article. smilies/smiley.gif
Nice Scrolling
written by Rajendra Prasad panchati, December 22, 2009
Smooth scrolling.... smilies/cool.gif

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
Last Updated ( Tuesday, 17 February 2009 23:52 )  

Articles


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Adobe Gallery


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Community


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

FAQ's


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Resources


Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/content/48/9096548/html/xfunda.com/libraries/joomla/cache/handler/callback.php on line 100

Who's Online

We have 40 guests online

Subscribe Feeds

Enter your email address:

Sponsor Adds


 
 

Submit Article

We want to develop such a Community portal which will provide a good resource on latest hot technologies such as .NET, VB.NET, C#.NET, ADO.NET, ASP.NET, PHP, Flash, Photoshop. If you like to write for us, this guideline for you. please send your article, faqs on admin[at]xfunda.com

Adobe Gallery Photoshop Tutorials...

Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Photoshop Tutorial - Create Colorful Composition in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Photoshop Tutorial - Create a Nice Autumn Scenery in Photoshop Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Photoshop Tutorial - Create a Beautiful Lonely Fantasy Fairy Category - Photoshop >> illustration and Art. ...
 
Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Photoshop Tutorial - How To Create a Futuristic Sci-Fi Scene Category - Photoshop >> Photo Effects. ...
 
Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Photoshop Tutorial - Goddess cadeira photo effect in Photoshop Category - Photoshop >> Photo Effects. ...