仿新浪微博返回顶部的jquery实现代码


Posted in Javascript onOctober 01, 2012

一、引言

在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。

其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮;人人网的返回顶部直接在底部的工具条上;新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果。本文的实现就是类似于新浪微博的这种效果。

二、jQuery下的返回顶部功能

您可以狠狠地点击这里:jQuery下的返回顶部demo

可以看到,如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条,如下图所示:

点击这里“返回顶部”字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 ? 不见了。

实现的原理嘛,恩……估计鲜有人关心,所以我也懒得浪费口水了,直接上代码。

无论是这里的jQuery实现还是MooTools实现,下面的CSS代码都是一致的,如下:
CSS代码:

.backToTop { 
display: none; 
width: 18px; 
line-height: 1.2; 
padding: 5px 0; 
background-color: #000; 
color: #fff; 
font-size: 12px; 
text-align: center; 
position: fixed; 
_position: absolute; 
right: 10px; 
bottom: 100px; 
_bottom: "auto"; 
cursor: pointer; 
opacity: .6; 
filter: Alpha(opacity=60); 
}

JS代码:
(function() { 
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
$("html, body").animate({ scrollTop: 0 }, 120); 
}), $backToTopFun = function() { 
var st = $(document).scrollTop(), winh = $(window).height(); 
(st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
//IE6下的定位 
if (!window.XMLHttpRequest) { 
$backToTopEle.css("top", st + winh - 166); 
} 
}; 
$(window).bind("scroll", $backToTopFun); 
$(function() { $backToTopFun(); }); 
})();

三、MooTools下返回顶部功能实现

您可以狠狠地点击这里:MooTools下的返回顶部demo

demo页面的效果与上面jQuery demo下效果基本一致。

代码部分。CSS代码完全同上。JS代码如下:

(function() { 
var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", { 
"class": "backToTop", 
title: $backToTopTxt 
}).set("text", $backToTopTxt).addEvent("click", function() { 
var st = document.getScroll().y, speed = st / 6; 
var funScroll = function() { 
st -= speed; 
if (st <= 0) { st = 0; } 
window.scrollTo(0, st); 
if (st > 0) { setTimeout(funScroll, 20); } 
}; 
funScroll(); 
}).inject(document.body), $backToTopFun = function() { 
var st = document.getScroll().y, winh = window.getSize().y; 
(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none"); 
//IE6下的定位 
if (!window.XMLHttpRequest) { 
$backToTopEle.setStyle("top", st + winh - 166); 
} 
}; 
window.addEvents({ 
scroll: $backToTopFun, 
domready: $backToTopFun 
}); 
})();

直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。

MooTools的动画方法Fx不支持滚动,要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是,显然, 这里的简单功能没有必要再使用额外的插件,所以直接设置了个定时器实现了平滑滚动效果。

注:demo页面中的美女图片作用是撑开页面高度使产生滚动条。

四、结语
其实实现页面返回顶部效果最简单的就是a标签然后href属性值直接就是#锚点就ok了。但是这种方法会在url地址后面产生一个”#”。关于锚点相关的内容您可以参见我之前的“关于锚点跳转及jQuery下相关操作与插件”一文。

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 #Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 #Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 #Javascript
js 手机号码合法性验证代码集合
Sep 29 #Javascript
JavaScript模板入门介绍
Sep 26 #Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 #Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 #Javascript
You might like
php生成文件
2007/01/15 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
农民工创业典型事迹
2014/01/25 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL