时间:2021-05-26
炫酷的返回顶部功能
js核心代码
window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.style.display = "none"; } } var ptt=20;function pageScroll() { document.getElementById('flypig').style.display='block';window.scrollBy(0,-10); //每次上升10px if(document.body.scrollTop==0) { document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; }scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay);}//pageScroll ends}html
<!DOCTYPE html><html><head> <title>返回顶部按钮的实现</title> <meta charset="utf-8" /><style>body{ margin:0px;}#flypig{ display: none; float: left; position: fixed; bottom: 20px; margin-left: 75%; cursor: pointer; margin-bottom: 20px;}#go{ display: block; float: left; position: fixed; bottom: 10px; margin-left: 75%; cursor: pointer;}</style><script> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.style.display = "none"; } } var ptt=20;function pageScroll() { document.getElementById('flypig').style.display='block';window.scrollBy(0,-10); //每次上升10px if(document.body.scrollTop==0) { document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; }scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay);}//pageScroll ends} </script></head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center;">请往下滑</h1><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><!--让你的页面足够的长--><div style="display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;" id="flypig"><img src="/wp-content/themes/Jakesoft/images/flypig.gif"> </div><div style="display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;" id="go" onclick="pageScroll()">返回顶部</div></html>以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下html:css:#btn{position:fixed;displ
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素:返回顶部其中a标签指向锚点top,可以在顶部防止
今天给大家介绍一下如何利用jQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的
前言本文主要介绍了Vue实现返回顶部按钮的方法,下面话不多说,来直接看代码吧实例代码:返回顶部//数据源exportdefault{name:'scrollTo