仿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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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下打开URL地址的几种方法小结
2010/05/16 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
微信小程序实现图片压缩功能
2018/01/26 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python实现把数字转换成中文
2015/06/29 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
高中美术教学反思
2014/01/19 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
淮海战役观后感
2015/06/11 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
MySQL笔记 —SQL运算符
2022/01/18 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
PyTorch中permute的使用方法
2022/04/26 Python