回到顶部：
<style> .return-top{ width:100px; height:100px; font:bold 50px/100px "宋体"; color:#fff; background-color:#9e9e9e; position:fixed; bottom:20px; right:20px; text-align:center; cursor:pointer; display:none; } .return-top.active{ display:block; } </style> <div class="return-top" id="return_top"><img style=" 100%; height: 100px;" src="images/hdb.png" /></div> <script> /* 思路： 第一步：当页面加载完后，获取所要操作的 节点对象 第二步：为window对象添加一个滚动条滚动事件onscroll 第三步： 在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值 当这个数值大于300的时候，显示出回到顶部图标 否则，隐藏回到顶部图标 第四步： 为回到顶部图标添加一个点击事件，滚动条回到顶部。 */ 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>
原来是：
<!doctype html> <html> <head> <meta charset="UTF-8"> <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>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <h1>大鹏一日同风起，扶摇直上九万里。</h1> <div class="return-top" id="return_top">▲</div> <script> /* 思路： 第一步：当页面加载完后，获取所要操作的 节点对象 第二步：为window对象添加一个滚动条滚动事件onscroll 第三步： 在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值 当这个数值大于300的时候，显示出回到顶部图标 否则，隐藏回到顶部图标 第四步： 为回到顶部图标添加一个点击事件，滚动条回到顶部。 */ 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>