返回顶部的js实现(jQuery/MooTools)
一、引言
在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页面中的美女图片作用是撑开页面高度使产生滚动条。
本文算是个实用小技术,内容不多,希望能对您的学习有所帮助。感谢阅读。
转自张鑫旭-鑫空间-鑫生活
原文地址:http://www.zhangxinxu.com/wordpress/?p=1576
返回顶部的js实现(jQuery/MooTools)相关推荐
- 仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...
- 返回顶部:js代码篇
代码篇: 地址:jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部 我们监听滚动事件,放滚动到 400px 时,出发显示返回顶部标签,然后给该标签,绑定一个事件,点击返回顶部. H ...
- 返回顶部按钮 js普通函数版/class构造函数版/JQ版
本文的返回顶部 有两种版本:①js普通函数版: ②class构造函数版:③JQuery版 话不多说直接上代码!(其中样式较简陋,引用时可以自己根据需要来修改样式) ①JS普通函数 封装好的返回顶部 版 ...
- html js 回到顶部,简单的返回顶部的js代码
返回顶部js代码 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
- 教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
- 点击缓慢滑动返回顶部
点击缓慢滑动返回顶部 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 使用setinerval实现缓慢返回顶部 / ...
- 如何实现返回顶部功能
jsp代码 <span id="assetToTop" class="commentTop" style="cursor:pointer; wi ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 点击返回页面顶部(h5、js、jQuery 三种方式)
当页面过长时,通常会在滚动条到一定位置时设置按钮,点击可以快速返回顶部或者指定的位置处. 参考文档:jQuery中页面返回顶部的方法总结 方法一:锚点定位 当点击a标签,会直接返回到顶部:如果p标签有 ...
最新文章
- ExtJs4 笔记(5) Ext.Button 按钮
- UltraEdit中OracleSQL的syntax文档
- SpringMvc和Mybatis整合需要配置的xml
- 根据创建时间搜索对应的BSP application
- Android窗口管理服务WindowManagerService的简要介绍和学习计划
- 切题 (problem)(线段树+最大流最小割)
- wcf 返回图片_wcf http 返回图片
- Mysql 远程连接的问题 2003 - Can't connect to MySQL server on '39.106.187.107' (60 Operation timed out)...
- Unity加载本地图片的2种方式
- Day_05 显示字符串
- 【简单python爬虫】爬取豆瓣电影Top250的基本信息
- 苹果iPad mini 5蜂窝数据版上架:3896元起
- 如何快捷修改eclipse黑色背景和字体颜色设置?
- Linux性能优化(一)——stress压力测试工具
- 机房ip和住宅ip的区别是什么?
- App Store风靡!当下热门应用商店简析
- 尚硅谷github案例
- P和NP以及NPC、NP-Hard问题
- 方差分析与单因素方差分析
- 关于post数据服务器端接收不全