仿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圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
HTML基础详解(下)
Oct 16 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 什么是PEAR?(第三篇)
2009/03/19 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python网页解析器使用实例详解
2020/05/30 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
经管应届生求职信
2013/11/17 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
会计工作岗位职责
2015/02/03 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python