基于jquery的回到頁面頂部按鈕

更新時間：2011年06月27日 23:56:17 作者：

昨天看到一個園友的blog中有個頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了一個, 用jQuery寫是再簡單不過了. 下面就直接給出代碼了

css代碼：

 
.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; 
} 

下面是jquery代碼

復制代碼代碼如下:

 
;(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 
}); 