这篇文章发布于 2011年04月7日，星期四，18:27，归类于 JS实例。 阅读 110957 次, 今日 4 次 24 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1576
一、引言
在web页面中，如果页面较高，为了方便用户快速地返回顶部，都会添加一个返回顶部按钮。例如：
其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮；人人网的返回顶部直接在底部的工具条上；新浪微博的返回顶部在滚动高度大于0的时候显示，且返回顶部的效果是平滑动画效果。本文的实现就是类似于新浪微博的这种效果。//zxx:新浪微博今天启用新域名weibo.com了
二、jQuery下的返回顶部功能
您可以狠狠地点击这里：jQuery下的返回顶部demo
可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示：
点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。
实现的原理嘛，恩……估计鲜有人关心，所以我也懒得浪费口水了，直接上代码。
无论是这里的jQuery实现还是MooTools实现，下面的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(); });
})();
寥寥十几行代码就实现了全部的交互细节了。您可以将上面代码直接拷贝到您的JavaScript文件中，页面就有效果啦！对了，请使用jQuery 1.4+。
三、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下相关操作与插件”一文。
本文算是个实用小技术，内容不多，希望能对您的学习有所帮助。感谢阅读。
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1576
（本篇完）
- 分享一个即插即用的私藏缓动动画JS小算法 (0.540)
- URL锚点HTML定位技术机制、应用与问题 (0.308)
- MooTools下简易自定义滚动条小插件 (0.251)
- 最近整的MooTools库下Mbox弹框插件 (0.242)
- 关于锚点跳转及jQuery下相关操作与插件 (0.206)
- MooTools和jQuery库继承实现class切换对比 (0.153)
- js页面滚动时层智能浮动定位实现(jQuery/MooTools) (0.153)
- jQuery与MooTools库的一些比对 (0.153)
- HTML5 Boolean类型属性(如required)值的JS获取 (0.153)
- HTML5 localStorage本地存储实际应用举例 (0.135)
- 大侠，请留步，要不过来了解下CSS Scroll Snap？ (RANDOM - 0.090)
我的应用
我的应用
demo页的图片可以哦，色
为什么$(window).animate({scrollTop:”1000″}),没效果呢
不兼容ie
你好我想请问一下
var $backToTopTxt = “返回顶部”, $backToTopEle = $(”).appendTo($(“body”))
.text($backToTopTxt).attr(“title”, $backToTopTxt).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, 120);
})
这样写的原因是什么，为什么不能在body中直接写入
旭哥，我想问下，为什么有些JQ和script一定要插到body才会起作用，假如插入到head貌似就不会起作用，这个返回顶部就是一个例子，我搜索了一下你的文章，好像没有讲到哦，求大神解答
@路人 元素未载入，事件无法绑定。
soga那我知道了，学习了，谢谢。
牛X啊，哈哈
收藏，必须的~
在IE6下，“返回顶部”按钮会在滚动时上下跳
嗯，挺好，我用上了。
谢谢您的分享，学习了，感谢。
哥们，为什么复制下来做成的网页没有这个效果？
如果不考虑animation的话，scrollIntoView就可以了 所有浏览器都支持
$(window).scroll(function() {
$(window).scrollTop() == “0” ? $(“.gotop”).fadeOut(“slow”) : $(“.gotop”).fadeIn(“slow”)
});
这样还可淡入淡出，是否更简洁呢？
$backToTopEle.css(“top”, st + winh – 166);
减掉的166是什么？求解
@sunhaixun 166为IE6下距离浏览器底部的距离+滚动元素的高度。
ie 出现晃动现象，效果不理想
不错。
从oschina进来的。滚动页面好卡。
博主能结合一下这个地址的http://www.maxzu.com/archives/356.html效果仿一个？效果酷。再加上滚动下来才显示就更酷。求代码。
CSS里倒数第四行_bottom:”auto”有什么作用吗？浏览器识别不出来的加了双引号
@MoLice 为了兼顾IE6 absolute定位
jQuery的，在Opera上边会有异常奇异的表现。 吧 120 改成 12000 可以看到增强的奇异效果。
用 Opera 时把 $(“html, body”) 改成 $(‘html’) 就好了。
也是，闭包额
博主这样写的话在ie6下会引起崩溃,ie6有时候会出现不允许页面加载完成前js修改dom的情况,建议全部包含在$(function(){})中