jquery_jqueryに基づくページのトップボタンに戻る

css代码：

复制代 代码如下:

.scroll-up {
background : #dcdcdc url('up.png') リピートなし 中央 中央;
幅:48px !重要; /*ff およびその他の標準ブラウザの場合*/
height:48px !重要;
_幅: 58px; /*IE6 非標準ボックス モデルの場合*/
_height: 58px;
位置: 固定;
_位置: 絶対; /*IE6 の修正されたバグ*/
不透明度: .6;
フィルター: アルファ(不透明度=60); /*IE の不透明度の場合*/
padding:5px;
カーソル: ポインタ;
表示: なし。
/*ff chrome の css3 プロパティ*/
border-radius:5px;
-webkit-transition-property: 背景色、不透明度;
-webkit-transition-duration: 1 秒;
-webkit-transition-timing-function: 簡単;
-moz-transition-property: 背景色;
-moz-transition-duration: 1 秒;
-moz-transition-timing-function: 簡単;
}
.scroll-up:hover {
背景色:#B9B9B9;
不透明度: 0.8;
}

下は jquery代码

复制代代码如下:

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

').css({
下: opts.bottom 'px',
右: opts.right 'px'
})。 addClass('scroll-up').attr('title', opts.title)
.click(function() {
$('html, body').animate({scrollTop: 0}, opts .duration);
}).appendTo('body');
// ウィンドウのスクロールイベント
$(window).bind('scroll', function() {
varscrollTop = $(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中の修正無しのバグ
if(isIE6( )) {
var top = viewHeightscrollTop - $scrollBtn.outerHeight() - opts.bottom;
$scrollBtn.css('top', top 'px');
}) ;
// IE6 かどうか判断
function isIE6() {
if($.browser.msie) {
if($.browser.version == '6.0') return true;
}
}
};
/**
* -params
* -showScale: スクロールアップ ボタンを表示する量を下にスクロールします
* -right: スクロール可能なコンテナの右へ
* -bottom: スクロール可能なコンテナの一番下まで
*/
$.scrollBtn.defaults = { // 默认值
showScale: 100, // 超过100px 显示按钮
right:10,
bottom: 10,
duration:200, // 页面顶部に戻る時間間隔
title:'トップに戻る' // div のタイトル属性
}
})(jQuery);
$.scrollBtn({
showScale: 200, //下滚200px後显示按钮
bottom:20, // 靠底部20px
right:20 // 靠右部20px
});

backToTop.rar