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

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

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

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...