当前位置:主页 > 网页教程 > 设计制作综合 > 内容欢迎大家投稿

回到顶部的页面跟随按钮(仿淘宝)

时间:2013-10-10 10:08来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

回到顶部的页面跟随按钮(仿淘宝) 三联

工作中越来越觉得模块化的重要,有些功能提出来更便于今后重用,于是从今天起,工作中写的模块化的东西我会把他们提出来,也方便大家参考学习。现在 的技术和前端博客貌似都喜欢在文章前面配个抬头图。那么我以后也配吧,另外我承认今天的头图风格抄自腾讯CDC(这种wp风格的东西怎么巨不搭啊~)。

在工作中经常会做一些巨长无比的页面,这些页面包括产品列表页,或者SNS的好友信息列表等等。当用户将页面向下拉动的时候,用户发现,页面怎么这 么长,怎么拉不完呢?化用小饭小说的一句话说“你能把页面写出来,我没理由看不完的啊”。当这个页面高度超过5000px,用户就受不了啦,他被自己 1024*768的lcd显示器刺痛了双眼,从而失去了自己当前的focus(焦点),这时候她为了搞清楚自己的focus,就想:“bless me回到页面头部吧!”,按鼠标的手向右寻找,找到了他IE右边的scrollbar。这种事情时常发生。所以很多程序员朋友浏览网页使用键盘的 pagedown或者向下按键去翻页。这样他就比较清楚自己的位置。快捷键是上帝赐给人类的礼物,有些人没有这种礼物,于是无所不晓的前端开发者们在曾几 何时说了:“要有返回顶部跟随页面滚动的按钮。”于是这种按钮出现了,出现在淘宝的宝贝列表里,出现在SNS好友信息的列表里。

 

言归正传,先贴最终效果:

需求:

1 页面scrollTop为0的时候不显示此按钮,下拉页面后渐显,上拉页面回到页面头部后渐隐,并跟随页面拉动处在页面右边固定位置。

2 网上大多代码都是相对window定位来个fixed,我们的需求不要他fixed,而要相对外层container定位,从而可以紧靠container右端,而不至于调整浏览器宽度时致使此按钮浮动在页面内容之上。

3 兼容所有当前要照顾的浏览器,包括ie6。

需要准备的工具:

电脑一个,jQuery库一个

img素材:

先让我们写HTML吧

<div id="container">
</div>

是不是很简单呢,CSS也不是很复杂,.go-top是按钮的容器,absolute的定位是针对他外面的relative的,这 个relative会通过js加在id为container的容器上。right:-30px保证这个东西出现在container容器的右端,a的 cursor和outline仅作装饰作用,当然你也可以加个background啊什么的,以你觉得好看为准:

.go-top{ width:25px; height:65px; position:absolute; right:-30px;}
.go-top a
{ display:block; cursor:pointer; outline:none;}

写JS是关键的部分,主要用到的方法就是个scroll()吧,使用这个东西能够让页面随着你的鼠标滚动而动态改变go-top距页面顶端(准确说是body或html顶端)的距离:


代码
$(function(){
var topDistance = 450;//go-top距顶端距离
var showDistance = 1;//距离顶端多少距离开始显示go-top
var gotopCon = "<div class='go-top'><a href='#'><img src='images/gotop.gif' /></a></div>"
var thisTop = $(window).scrollTop() + topDistance;
$(
"#container").css("position","relative");
$(
"#container").append(gotopCon);
$(
".go-top").css("top",thisTop);
if($(window).scrollTop() < showDistance){
$(
".go-top").hide();
}
$(window).scroll(
function(){
thisTop
= $(this).scrollTop() + topDistance;
$(
".go-top").css("top",thisTop);
if($(this).scrollTop() < showDistance){
$(
".go-top").fadeOut("fast");
}
else{
$(
".go-top").fadeIn("fast");
}
});
$(
"a",".go-top").click(function(){
$(
"html").animate({scrollTop:0},"fast");//IE,FF
$("body").animate({scrollTop:0},"fast");//Webkit
return false;
});
});

 

好了,今天的课上到这里,有问题的同学下课留下来问问题,其他同学出去玩去吧。

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接