顾名思义，ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮，点击该按钮页面滚动条移动到顶部。
一、ScrollUp使用
ScrollUp是一个轻量级的Jquery插件，它创建一个可自定义的“滚动到顶部”的按钮，在任意的网站中进行简单的调用就能达到效果。
ScrollUp提供了四种样式
- tab样式
- 胶囊按钮样式
- 链接样式
- 圆型图片样式
- 也可以自定义样式
首先我们需要先引入jquery.scrollUp.min.js，当然我们是假定了你已经引入了jquery必须文件为前提的：
该代码在github的地址为：
最简单的调用方式如下：
$(function(){ $.scrollUp();}); 该插件所有的参数默认属性为：
$(function(){ $.scrollUp({ scrollName:'scrollUp',// 元素ID topDistance:'300',// 顶部距离显示元素之前 (px) topSpeed:300,// 回到顶部的速度 (ms) animation:'fade',// 动画类型Fade, slide, none animationInSpeed:200, animationOutSpeed:200, scrollText:'Scroll to top',// 元素文本 activeOverlay:false,// 显示scrollUp的基准线，false为不显示, e.g '#00FFFF' });}); 对象的销毁
$.scrollUp.destroy();
下面分别说明该插件的三种样式的设置：
三种样式插件的设置都是一样的，如下：
$(function(){ $.scrollUp({ animation:'fade', activeOverlay:'#00FFFF' });}); 以上把移动效果设置成“fade”，基准线颜色设置成“#00ffff”;
这三种方式的主要区别就是css
第一种：文字链接样式
这种样式是最简单的，返回到顶部的按钮是用文本显示
css如下：
#scrollUp { bottom:20px; right:20px;} 该方式只是设置了“scroll to top”的位置
第二种：按钮样式
css如下：
#scrollUp { bottom:20px; right:20px; background:#555; color:#fff; font-size:12px; font-family:sans-serif; text-decoration:none; opacity:.9; padding:10px20px; -webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px; -webkit-transition:background200mslinear; -moz-transition:background200mslinear; transition:background200mslinear;} #scrollUp:hover { background:#000; } 这种方式设置了背景、边框、字体、颜色以及鼠标经过的样式变化等，最终呈现出的就是一个按钮的形式。
第三种：tab样式
css如下：
#scrollUp { bottom:-10px; right:30px; width:70px; height:70px; padding:10px5px; font-family:sans-serif; font-size:14px; line-height:20px; text-align:center; text-decoration:none; text-shadow:01px0#fff; color:#828282; -webkit-box-shadow:00px2px1pxrgba(0,0,0,0.2); -moz-box-shadow:00px2px1pxrgba(0,0,0,0.2); box-shadow:00px2px1pxrgba(0,0,0,0.2); background-color:#E6E6E6; background-image:-moz-linear-gradient(top,#EBEBEB,#DEDEDE); background-image:-webkit-gradient(linear,00,0100%,from(#EBEBEB),to(#DEDEDE)); background-image:-webkit-linear-gradient(top,#EBEBEB,#DEDEDE); background-image:-o-linear-gradient(top,#EBEBEB,#DEDEDE); background-image:linear-gradient(tobottom,#EBEBEB,#DEDEDE); background-repeat:repeat-x; -webkit-transition:bottom150mslinear; -moz-transition:bottom150mslinear; transition:bottom150mslinear;} #scrollUp:hover { bottom:0px; } 这种方式更具有友好性，当向下滚动浏览器时，“scroll to top”按钮就像tab选项卡一样弹出。
DEMO请参看：
二、想想如果我们自己如何去实现呢？
简单实现：
1、监听window的scroll事件，判断高度。
2、点击按钮滚到最上面。
//样式#scrollUp {position: fixed;z-index: 2147483647;display: none;bottom: 20px;right: 20px;background: #555;color: #fff;font-size: 12px;font-family: sans-serif;text-decoration: none;opacity: .9;padding: 10px 20px;-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;-webkit-transition: background 200ms linear;-moz-transition: background 200ms linear;-o-transition: background 200ms linear;transition: background 200ms linear;}#scrollUp:hover {cursor: pointer;opacity: 1;background: #333333;} 回到顶部 //Jquery实现$(window).scroll(function() { if( $(window).scrollTop()>'指定高度'){ $('#scrollUp').show(); }else{ $('#scrollUp').hide(); }}); $('#scrollUp').click(function(){ $(document).scrollTo(0,500);});//Javascript实现window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop >'指定高度') { document.getElementById('scrollUp').style.display = "block";} else { document.getElementById('scrollUp').style.display = "none"; } }； document.getElementById('scrollUp').οnclick=function(){ window.scrollTo(0,0);}
以上只是简单实现，没有考虑动画。