仿CSDN Blog返回页面顶部功能实现原理及代码
2013-06-30 18:33
597 查看
只修改了2个地方:
,返回的速度-->改成了慢慢回去。(原来是一闪而返回)
,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)
注意:JS务必要写在 Html之后;
HTML
Javascript代码
CSS样式
,返回的速度-->改成了慢慢回去。(原来是一闪而返回)
,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)
注意:JS务必要写在 Html之后;
HTML
<div id="d-top" style="display:none;"> <a id="d-top-a" href="#" title="回到顶部"> <img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /></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; }
相关文章推荐
- 仿CSDN Blog返回页面顶部功能
- MooTools下的返回顶部功能的实现实例页面
- jQuery一句代码实现返回顶部功能
- jQuery下的返回顶部功能的实现实例页面
- 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
- 微信小程序 --- 6行代码实现页面返回顶部
- jQuery下的返回顶部功能的实现实例页面
- 【web布局】点击按钮返回页面顶部的功能实现
- 用jQuery实现返回页面顶部的功能
- [置顶] 【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。
- [置顶] 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
- 【Android】Scrollview返回顶部,快速返回顶部的功能实现,详解代码。
- jquery实现返回页面顶部功能。
- 页面返回顶部功能的实现
- jQuery下的返回顶部功能的实现实例页面
- jQuery下的返回顶部功能的实现实例页面
- 仿CSDN Blog返回页面顶部功能
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- js+JQuery返回顶部功能如何实现