仿新浪微博返回顶部的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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
js表格分页实现代码
Sep 18 Javascript
js DOM模型操作
Dec 28 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
vue.js todolist实现代码
Oct 29 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP exif扩展方法开启详解
2014/07/28 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
JavaScript 原型继承
2011/12/26 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python 动态加载的实现方法
2017/12/22 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
替换python字典中的key值方法
2018/07/06 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python支持多线程的爬虫实例
2019/12/21 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
25道Java面试题集合
2013/05/21 面试题
个人简历自我评价范文
2014/02/04 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
疾病捐款倡议书
2014/05/13 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle