javascript

js implements float back to top button instance

This article illustrates how js can float back to the top button. Share to everybody for everybody reference. Specific implementation methods are as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Float back to the top button </title>
<style>
body{
height:2000px;
}
.rTop{
width:100px; height:25px;
text-align:center; font-size:small;
line-height:25px; border:1px solid #999;
position:fixed; right:0; bottom:0;
border-bottom-color:#333;
border-right-color:#333; margin:5px;
cursor:pointer; display:none
}
</style>
<script>
<!-- Drag the scroll bar or scroll the mouse wheel -->
window.onscroll=function(){
if(document.body.scrollTop||document.documentElement.scrollTop>0){
document.getElementById('rTop').style.display="block"
}else{
document.getElementById('rTop').style.display="none"
}
}
<!-- Click the back to top button -->
function toTop(){
window.scrollTo('0','0');
document.getElementById('rTop').style.display="none"
}
</script>
</head>
<body>
<div class="rTop" id="rTop" onClick="toTop()"> Return to the top </div>
<h1> At the top of the </h1>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> test </h1><p></p><h1> test </h1><p></p><h1> test </h1><p></p>
<h1> At the bottom of the </h1>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.