仿新浪微博返回顶部的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面向对象之体会[总结]
Nov 13 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
讲解vue-router之命名路由和命名视图
May 28 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Python中的推导式使用详解
2015/06/03 Python
Python切片操作实例分析
2018/03/16 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
网络方面基础面试题
2012/11/16 面试题
科室工作的个人自我评价
2013/10/30 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
实习自我评价怎么写
2013/12/02 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
学习委员自我鉴定
2014/01/13 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014离婚协议书范文
2014/09/10 职场文书
财务个人年度总结范文
2015/02/26 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript