程序员人生 网站导航

javascript实现页面中回到顶部功能

栏目:htmlcss时间:2016-11-17 09:51:26

当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>

本案例对回到顶部功能进行了简单实现,读者可以运行代码查看效果。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐