工作中越来越觉得模块化的重要，有些功能提出来更便于今后重用，于是从今天起，工作中写的模块化的东西我会把他们提出来，也方便大家参考学习。现在 的技术和前端博客貌似都喜欢在文章前面配个抬头图。那么我以后也配吧，另外我承认今天的头图风格抄自腾讯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; }); });
好了，今天的课上到这里，有问题的同学下课留下来问问题，其他同学出去玩去吧。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索页面
， 按钮
， 仿淘宝
， 容器
， container
， 仿淘宝详情页面
， 回到顶部
， scrollTop
， 头部跟随滚动
， jquery鼠标跟随
， jquery仿淘宝
， jquery仿淘宝分页
， 仿淘宝网
顶端
点击按钮回到页面顶部、ios 点击按钮回到顶部、回到顶部按钮、ios 回到顶部按钮、android 回到顶部按钮，以便于您获取更多的相关知识。