Go to top of page
Written by 21 August 2012
Most websites that have long texts to read use a button to help the users to return to the beginning. When a user scrolls and reads a large amount of text and wants to return to the top of the page, he does not need to scroll several times to come back to the top of the page. Instead just by clicking on a button he/she returns to the top of the page, automatically. In this code, this possibility is provided for you. In addition, the button is not displayed always when the user is at the top of the page, and by scrolling slightly and moving away from the top of the page, the scroll button is displayed.
Code Snippet:
<!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!-- START OF Watermark Jump to Top Link DHTML -->
<!-- SUMMARY BRIEF
This DHTML script will put a small watermark
link in the bottom right corner of your page
that will stay there even when the page scrolls.
This link will always take the user back to
the top of the page.
-->
<!-- Put this portion of the script inside of your <HEAD> tag -->
<script>
<!--
// Change this text to the text that you want to be displayed as the link on your page.
var displayed="<nobr><font size=2 face=Arial><b>[Top]</b></font></nobr>"
// === DO NOT EDIT ANYTHING BELOW THIS LINE!!! === //
var logolink='javascript:window.scrollTo(0,0)'
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
if (ie4||ns6)
document.write('<span id="logo" style="position:absolute;top:-300;z-index:100">'+displayed+'</span>')
function createtext(){ //function for NS4
staticimage=new Layer(5)
staticimage.left=-300
staticimage.document.write('<a href="'+logolink+'">'+displayed+'</a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}
function staticit(){ //function for IE4/ NS6
var w2=ns6? pageXOffset+w : document.body.scrollLeft+w
var h2=ns6? pageYOffset+h : document.body.scrollTop+h
crosslogo.style.left=w2
crosslogo.style.top=h2
}
function staticit2(){ //function for NS4
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10
}
function inserttext(){ //function for IE4/ NS6
if (ie4)
crosslogo=document.all.logo
else if (ns6)
crosslogo=document.getElementById("logo")
crosslogo.innerHTML='<a href="'+logolink+'">'+displayed+'</a>'
w=ns6? window.innerWidth-crosslogo.offsetWidth-20 : document.body.clientWidth-crosslogo.offsetWidth-10
h=ns6? window.innerHeight-crosslogo.offsetHeight-15 : document.body.clientHeight-crosslogo.offsetHeight-10
crosslogo.style.left=w
crosslogo.style.top=h
if (ie4)
window.onscroll=staticit
else if (ns6)
startstatic=setInterval("staticit()",100)
}
if (ie4||ns6){
window.onload=inserttext
window.onresize=new Function("window.location.reload()")
}
else if (ns4)
window.onload=createtext
function staticitns(){ //function for NS4
startstatic=setInterval("staticit2()",90)
}
//-->
</script>
<!-- END OF Watermark Jump to Top Link DHTML --><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!