仿新浪微博返回顶部的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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
JS字符串截取函数实例
Dec 27 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JavaScript模块详解
Dec 18 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php防止用户重复提交表单
2015/11/02 PHP
php字符集转换
2017/01/23 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python threading的使用方法解析
2019/08/28 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
如何写自我鉴定
2014/03/19 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
中小学生学籍证明
2014/10/25 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
紧急迫降观后感
2015/06/15 职场文书
伊索寓言读书笔记
2015/06/30 职场文书