仿CSDN Blog返回页面顶部功能实现原理及代码


Posted in HTML / CSS onJune 30, 2013

只修改了2个地方:
,返回的速度-->改成了慢慢回去。(原来是一闪而返回)
,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动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;
}
HTML / CSS 相关文章推荐
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 #HTML / CSS
html5 input属性使用示例
Jun 28 #HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 #HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 #HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 #HTML / CSS
html5 offlline 缓存使用示例
Jun 24 #HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 #HTML / CSS
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
init进程的作用
2015/08/20 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
幼儿教师工作感言
2014/02/14 职场文书
《值日生》教学反思
2014/02/17 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python