The JavaScript script presented in this page can be used to add dynamically a button in webpage for Scroll to Top.
The button is added and displayed only when vertical scroll-bar position is more then half of window browser height. If vertical scroll position is less then half of 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, 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: https://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 half of 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 half of brows_height, and element '#scrtop'
 // remove button to scroll to Top of the page
 if(scrl_pos > (scrTop.brows_height() *.5) && !document.getElementById('scrtop')) {
 document.getElementById('sttop').innerHTML = '<div id="scrtop" onclick="window.scrollTo(0,0)"><span>&uArr;</span>TOP</div>';
 }
 else if(scrl_pos < (scrTop.brows_height() *.5) && 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.1%;
 width:1.8em;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:1.4em;
 font-size:.75em;
 padding:0;
 font-weight:800;
 color:blue;
 border-bottom: 1.85em solid #ebeb00;
 border-top: .78em solid #ebeb00;
 border-left: 1em solid transparent;
 border-right: 1em solid transparent;
 height: 0;
}
#sttop #scrtop:hover {
 border-color: #9eef9f;
 color:#000100;
border-radius:1.1em;
}
#sttop #scrtop span {
 display:block;
 margin:-8px auto -1px auto;
 font-size:1.9em;
 color:#fb0000;
}
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 src="scrolltop.js"></script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Dynamically Button to Scroll to Page Top

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (92039)
  2. Insert, Select and Update NULL value in MySQL (45918)
  3. Simple Ajax-PHP Contact Form Script (224)
  4. JavaScript Code Snippets (1382)
  5. Working with HTML attributes in PHP (7509)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (9766)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2049)
  3. Contact page - CoursesWeb (1996)
  4. Tabs effect with CSS (1993)
  5. Insert, Select and Update NULL value in MySQL (913)