当1个页面比较长的时候，在下拉页面到1定长度的时候，页面右下角通常会出现1个回到顶部的图标，点击便可以回到页面顶部，本案例对这1功能进行了简单实现。当页面下拉到1定长度后，页面右下角出现1个回到顶部图标，点击以后，页面会滑动到页面顶部，同时回到顶部图标也会消失。合适初学者参考。
<!doctype html>
<html>
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
.return-top{
width:100px;
height:100px;
font:bold 50px/100px "宋体";
color:#fff;
background-color:purple;
position:fixed;
bottom:20px;
right:20px;
text-align:center;
cursor:pointer;
display:none;
}
.return-top.active{
display:block;
}
</style>
</head>
<body>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<h1>大鹏1日同风起，扶摇直上9万里。</h1>
<div class="return-top" id="return_top">▲</div>
<script>
/*
思路：
第1步：当页面加载完后，获得所要操作的 节点对象
第2步：为window对象添加1个转动条转动事件onscroll
第3步：
在转动条转动的进程中，不断的获得转动条距离顶部的距离数值
当这个数值大于300的时候，显示出回到顶部图标
否则，隐藏回到顶部图标
第4步：
为回到顶部图标添加1个点击事件，转动条回到顶部。
*/
var return_top = document.getElementById("return_top");
var sTop;
window.onscroll = function(){
//sTop :转动条距离顶部的距离数值
sTop = document.body.scrollTop||document.documentElement.scrollTop;
if(sTop>300){
return_top.className = "return-top active";
}else{
return_top.className = "return-top";
}
}
return_top.onclick = function(){
var termId = setInterval(function(){
sTop-=50;
if(sTop<=0){
clearInterval(termId);
}
window.scrollTo(0,sTop);
},1);
}
</script>
</body>
</html>
本案例对回到顶部功能进行了简单实现，读者可以运行代码查看效果。