基于jquery的回到页面顶部按钮

　　.scroll-up {

　　background: #dcdcdc url('up.png') no-repeat center center;

　　width:48px !important; /*for ff and other standard browser*/

　　height:48px !important;

　　_width: 58px; /*for IE6 nonstandard box model*/

　　_height: 58px;

　　position: fixed;

　　_position: absolute; /*for IE6 fixed bug*/

　　opacity: .6;

　　filter: Alpha(opacity=60); /*for IE opacity*/

　　padding:5px;

　　cursor: pointer;

　　display: none;

　　/*css3 property for ff chrome*/

　　border-radius:5px;

　　-webkit-transition-property: background-color, opacity;

　　-webkit-transition-duration: 1s;

　　-webkit-transition-timing-function: ease;

　　-moz-transition-property: background-color;

　　-moz-transition-duration: 1s;

　　-moz-transition-timing-function: ease;

　　}

　　.scroll-up:hover {

　　background-color:#B9B9B9;

　　opacity: .8;

　　}

　　;(function($) {

　　$.scrollBtn = function(options) {

　　var opts = $.extend({}, $.scrollBtn.defaults, options);

　　var $scrollBtn = $('<DIV></DIV>').css({

　　bottom: opts.bottom + 'px',

　　right: opts.right + 'px'

　　}).addClass('scroll-up').attr('title', opts.title)

　　.click(function() {

　　$('html, body').animate({scrollTop: 0}, opts.duration);

　　}).appendTo('body');

　　// 绑定到window的scroll事件

　　$(window).bind('scroll', function() {

　　var scrollTop = $(document).scrollTop(),

　　viewHeight = $(window).height();

　　// 小于配置的显示范围 则fadeOut

　　if(scrollTop <= opts.showScale) {

　　if($scrollBtn.is(':visible'))

　　$scrollBtn.fadeOut(500);

　　// 大于配置的显示范围 则fadeIn

　　} else {

　　if($scrollBtn.is(':hidden'))

　　$scrollBtn.fadeIn(500);

　　}

　　// 解决IE6下css中fixed没有效果的bug

　　if(isIE6()) {

　　var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;

　　$scrollBtn.css('top', top + 'px');

　　}

　　});

　　// 判断是否为IE6

　　function isIE6() {

　　if($.browser.msie) {

　　if($.browser.version == '6.0') return true;

　　}

　　}

　　};

　　/**

　　* -params

　　* -showScale: scroll down how much to show the scrollup button

　　* -right: to right of scrollable container

　　* -bottom: to bottom of scrollable container

　　*/

　　$.scrollBtn.defaults = { // 默认值

　　showScale: 100, // 超过100px 显示按钮

　　right:10,

　　bottom:10,

　　duration:200, // 回到页面顶部的时间间隔

　　title:'back to top' // div的title属性

　　}

　　})(jQuery);

　　$.scrollBtn({

　　showScale: 200, //下滚200px后 显示按钮

　　bottom:20, // 靠底部20px

　　right:20 // 靠右部20px

　　});