MaxxBlade's PC Stuff
 
 

Bak2Top v1.8

View our reviews on Hot Scripts [Download bak2top.zip] [Example Page]

Save yourself all the trouble of building those "back to top" links all over your page and have a floating version instead.  It's always at the bottom of your browser window and always links to the top of your page.

The link will only appear when you have scrolled away from the top of the page. It will then disapear when you are back at the top of the page.

Version 1.8 Changes

This version is a radical overhaul of the original script. Gone is the document.write statement, instead I am now adding a node to the <body> tag and there is no longer a simple browser check. This is now designed to be used on HTML5 pages only so your mileage on older pages may vary.

Blow-By-Blow Breakdown

If you are learning JavaScript or wish to change things this is the section for you. We'll go through the code bit by bit

  • // Bak2Top v1.8 by MaxxBlade www.maxxblade.co.uk/bak2top

    This is my only comment in order to keep the script to a small size. If you use this script, I'd be grateful if you left this as is. However, if you use some kind of script obfustication or minification and this line gets removed, please consider adding a link to this page somewhere on your site. Many thanks!
  • function b2o(){return document.documentElement.scrollTop;}

    This small function returns the number of pixels the current page has been scrolled by. We'll use this value later on. The function always returns the current 'scrolled by' value every time it is called and is useful when trying to figure out where to put the 'Back To Top' link.
  • function b2t(){
      b2te=document.getElementById('bttl').style;
      b2te.right='10px';
      b2te.top=((b2o()<1)?-500:document.documentElement.clientHeight+b2o()-50)+'px';
      setTimeout('b2t()',99);
    }

    This function seems to do a lot but really not.
  • var b2tDiv=document.createElement('div');

    Sets up the div element we are going to attach to the <body> tag shortly.
  • b2tDiv.innerHTML = '<a onclick="JavaScript:window.scrollTo(0,0)">
      <div id="bttl" class="bak2top">Back To Top</div></a>';

    Adds some HTML into the div, all ready for display.
  • document.body.appendChild(b2tDiv);

    Appends the new div element to the body element.
  • b2t();

    Runs the b2t() function for the first time.
Listed at Hot Scripts in JavaScript

Installation

  • Download bak2top.zip and unpack the files.
  • Copy bak2top.js to your web site.
  • Add the following line within the <BODY> tags on the page(s) you want to have the link:
    <SCRIPT type="text/javascript" defer src="pathto/bak2top.js"></SCRIPT>
  • Change "pathto/bak2top.js" to point to the location of bak2top.js
  • Installation Complete!

See the Pen Bak2Top by Niall Fernie (@MaxxB1ade) on CodePen.

 


JavaScripts

Bak2Top
Fall
FallT
Feed
Stars


Generators

Clock
Fade
Q3A Config
Safe


Script Bits

Window Dims
Window Offsets
Leading Zeros
Submit1ce


Games

DiRT 3
SongPop