The JavaScript script presented in this page can be used to add dinamically a button in webpage for Scroll to Top.
The button is added and displayed only when vertical scroll-bar position is more then window browser height. If vertical scroll position is less then window's height, the button is removed.
The script is composed by two main pieces: the JavaScript code that adds the button, and the CSS properties that styles it.

• To download the script, click -> Dynamically Button for Scrolling to Page Top, or you can use the codes presented bellow.

- To test it, click Demo, or scroll-down the page; a button for scrolling to top will appear in the bottom-right side of the page.

How to include this script in your webpage

1. Add this code in a .js file, named scrolltop.js :
/** Scroll to Top, from: http://coursesweb.net/javascript/ **/

var scrTop = new Object();
  // function to get scrollbar vertical position
  scrTop.scrollY = function() {
    return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  }

  // gets the height of the window
  scrTop.brows_height = function() {
    if (self.innerHeight) {
      var brows_hgh = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      var brows_hgh = document.documentElement.clientHeight;
    } else if (document.body) {
      var brows_hgh = document.body.clientHeight;
    }
    return brows_hgh;
  }

  // function for register event on scroll window
  scrTop.onScrollWin = function() {
    // if exists in page the #sttop element
    if(document.getElementById('sttop')) {
      window.onscroll = function() {
        var scrl_pos = scrTop.scrollY();                // get vertical scrollbar position

        // if vertical scroll position is more then brows_height, and no element '#scrtop'
        // add button to scroll to Top of the page as child element in #sttop
        // else, if vertical scroll position is less then brows_height, and element '#scrtop'
        // remove button to scroll to Top of the page
       if(scrl_pos > scrTop.brows_height() && !document.getElementById('scrtop')) {
         document.getElementById('sttop').innerHTML = '<div id="scrtop" onclick="scrollTo(0,0)"><span>&uArr;</span>TOP</div>';
       }
       else if(scrl_pos < scrTop.brows_height() && document.getElementById('scrtop')) {
         document.getElementById('sttop').removeChild(document.getElementById('scrtop'));
       }
     }
   }
  }
scrTop.onScrollWin();
2. Add this code in a .css file, named scrolltop.css :
/* For Scroll top */
#sttop {
 position:relative;
}
#sttop #scrtop {
 position:fixed;
 top:80%;
 right:1.58%;
 width:1.8em;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:1.4em;
 font-size:.7em;
 padding:0;
 font-weight:800;
 color:blue;
 border-bottom: 1.85em solid #fbfb00;
 border-top: .78em solid #fbfb00;
 border-left: 1em solid transparent;
 border-right: 1em solid transparent;
 height: 0;
}
#sttop #scrtop:hover {
 border-color: #9eef9f;
 color:#000100;
-moz-border-radius:1.1em;
-webkit-border-radius:1.1em;
-khtml-border-radius:1.1em;
border-radius:1.1em;
}
#sttop #scrtop span {
 display:block;
 margin:-8px auto -1px auto;
 font-size:1.85em;
 color:#fb0100;
}
3. In the <head> zone of the HTML document add this code (to include the .css file in that page):
<link href="scrolltop.css" rel="stylesheet" type="text/css" />
4. At the end of the HTML document, before the ending </body> tag, add this code:
<div id="sttop"></div>
<script type="text/javascript" src="scrolltop.js"></script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Dynamically Button to Scroll to Page Top

Last accessed pages

  1. Football Cars (4322)
  2. Waitress (556)
  3. JavaScript code and PHP (19859)
  4. My New Room 2 (352)
  5. Pool Master Secure (3904)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)