| 标题 | 仿CSDN Blog返回页面顶部功能实现原理及代码 |
| 范文 | 仿CSDN Blog返回页面顶部功能只修改了2个地方：返回的速度-->改成了慢慢回去，返回顶部图标出现的时机-->改成了只要不在顶部就显示出来，具体代码如下，感兴趣的朋友可以参考下 只修改了2个地方： ，返回的速度-->改成了慢慢回去。（原来是一闪而返回） ，返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。（原来是向下滚动500px后才显示） 注意：JS务必要写在 Html之后； HTML 代码如下: <div id="d-top"> <a id="d-top-a" href="#"> <img src="/uploads/202504/02/top3253.png" /></a> </div> Javascript代码 代码如下: <script type="text/javascript"> $(function(){ var d_top=$('#d-top'); document.onscroll=function(){ var scrTop=(document.body.scrollTop||document.documentElement.scrollTop); if(scrTop>500){ if(scrTop>0){ d_top.show(); }else{ d_top.hide(); } } $('#d-top-a').click(function(){ $("html,body").animate({scrollTop: 0},500); //scrollTo(0,0); this.blur(); return false; }); }); </script> CSS样式 代码如下: #d-top { position: fixed; float: right; z-index: 10; right: 10px; bottom: 40px; } #d-top img { width: 42px; opacity: 0.3; } img { border: medium none; } |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。