In this JavaScript tutorial it is presented a JS script, in two versions, that adds dynamically a button in the page to scroll to top of the page, the button is added only when the user scrolls the page down, more than one and half of the window length.
The ideea is simple, it is registered an onscroll event that checks the vertical scrollbar position. If vertical scrollbar position is more then window height, and the button is not added in the page, the script adds it, otherwise, if vertical scrollbar position is less then window height, and the button is on the page, the script removes it.
So, the button to scroll to page top appears only when it is nesessary.


- To test this script, just scroll this page down, the button will appear in the right side, with position fixed.

• To include the script in your page, just add the following code into the <head> </head> zone of the HTML document.
The graphic and position of the button can be set from CSS code.
<style type="text/css"><!--
#scrtop {
 position:fixed;
 top:80%;
 right:10px;
 width:29px;
 height:31px;
 background-color:yellow;
 border:2px solid blue;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:15px;;
 font-size:11px;
 padding:0;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 -khtml-border-radius:10px;
 border-radius:10px;
}
#scrtop b {
 display:block;
 margin:2px auto -1px auto;
 font-size:21px;
 padding:0;
}
--></style>
<script type="text/javascript"><!--
/* Add dynamically button to scroll to top of the page: coursesweb.net/javascript/ */

// function to get browser's window height
function getBrowsHeight() {
  if (self.innerHeight) var brows_height = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight) {
    var brows_height = document.documentElement.clientHeight;
  }
  else if (document.body) var brows_height = document.body.clientHeight;

  return brows_height;
}

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

var brows_height = getBrowsHeight();         // window's height

// register wvent on scroll window
window.onscroll = function() {
  var scrl_pos = scrollY();                // get vertical scrollbar position

  // if vertical scroll position is more then 110% brows_height, and no element '#scrtop'
  // add button to scroll to Top of the page
  // else, if vertical scroll position is less then 110% brows_height, and element '#scrtop'
  // remove button to scroll to Top of the page
 if(scrl_pos > (brows_height * 1.1) && !document.getElementById('scrtop')) {
   document.body.innerHTML += '<div id="scrtop" onclick="scrollTo(0,0)"><b>&uArr;</b>TOP</div>';
 }
 else if(scrl_pos < (brows_height * 1.1) && document.getElementById('scrtop')) {
   document.body.removeChild(document.getElementById('scrtop'));
 }
}
--></script>

Button to scroll to page top - variant 2

Here's another variant, safer, that creates the same effect. This time the HTML thgs for the button to scroll to top of the page is added directly in the HTML code, initially hidden. Then, the script makes it visible when it is necessary.
- Use this version if the first variant affects other JS scripts in your page that works with events. This can happend because the button is added dynamically in the HTML code, and affects the DOM.

- To include this variant in your page, add the following CSS code into the <head> </head> zone of the HTML document.
<style type="text/css"><!--
#scrtop {
 display:none;
 position:fixed;
 top:80%;
 right:10px;
 width:29px;
 height:31px;
 background-color:yellow;
 border:2px solid blue;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:15px;;
 font-size:11px;
 color:blue;
 padding:0;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 -khtml-border-radius:10px;
 border-radius:10px;
}
#scrtop span {
 display:block;
 margin:2px auto -1px auto;
 font-size:21px;
 font-weight:800;
 padding:0;
}
--></style>
Then, add this JavaScript code in the BODY of the page, to the end, before the </body> closing tag.
<div id="scrtop" onclick="scrollTo(0,0);"><span>&uArr;</span>TOP</div>
<script type="text/javascript"><!--
/* Add dynamically button to scroll to top of the page: coursesweb.net/javascript/ */

// function to get browser's window height
function getBrowsHeight() {
  if (self.innerHeight) var brows_height = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight) {
    var brows_height = document.documentElement.clientHeight;
  }
  else if (document.body) var brows_height = document.body.clientHeight;

  return brows_height;
}

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

var brows_height = getBrowsHeight();         // window's height

// register event on scroll window
window.onscroll = function() {
  var scrl_pos = scrollY();                // get vertical scrollbar position

  // if vertical scroll position is more then 110% brows_height, makes '#scrtop' visible
  // else, if vertical scroll position is less then 110% brows_height, hides '#scrtop'
 if(scrl_pos > (brows_height * 1.1)) {
   document.getElementById('scrtop').style.display = 'block';
 }
 else if(scrl_pos < (brows_height * 1.1)) {
   document.getElementById('scrtop').style.display = 'none';
 }
};
--></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"];
}
Add dynamically button to scroll to top of the page

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)