当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>本案例对回到顶部功能进行了简单实现，读者可以运行代码查看效果。
总结以上是内存溢出为你收集整理的javascript实现页面中回到顶部功能全部内容，希望文章能够帮你解决javascript实现页面中回到顶部功能所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）