仿新浪微博返回顶部的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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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制作新闻系统的思路
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PHP之header函数详解
2021/03/02 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
python中的字典详细介绍
2014/09/18 Python
python生成随机图形验证码详解
2017/11/08 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
pandas实现选取特定索引的行
2018/04/20 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
美术国培研修感言
2014/02/12 职场文书
文案策划求职信
2014/03/18 职场文书
我的长生果教学反思
2014/04/28 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
党员民主评议总结
2014/10/20 职场文书
公司会议开幕词
2016/03/03 职场文书