仿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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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连接Oracle for NT 远程数据库
2006/10/09 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
python 实现堆排序算法代码
2012/06/05 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
深入浅析Python字符编码
2015/11/12 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
strstr()的简单实现
2013/09/26 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
反腐倡廉标语
2014/06/24 职场文书
电话客服工作职责
2014/07/27 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS