Back to the top of the page based on jquery button _jquery

CSS code:

Copy Code code as follows:

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

Here is the jquery code

Copy Code code as follows:

;(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 ');
Scroll event bound to window
$ (window). bind (' scroll ', function () {
var scrolltop = $ (document). ScrollTop (),
Viewheight = $ (window). Height ();
is less than the configured display range fadeout
if (scrolltop <= opts.showscale) {
if ($scrollBtn. Is (': Visible '))
$scrollBtn. fadeout (500);
is larger than the display range of the configuration Fadein
} else {
if ($scrollBtn. Is (': Hidden '))
$scrollBtn. FadeIn (500);
}
Fix the bug in the IE6 CSS with fixed no effect
if (IsIE6 ()) {
var top = viewheight + scrolltop-$scrollBtn. Outerheight ()-opts.bottom;
$scrollBtn. CSS (' top ', top + ' px ');
}
});
Judge whether it is IE6
function IsIE6 () {
if ($.browser.msie) {
if ($.browser.version = = ' 6.0 ') return true;
}
}
};
/**
*-params
*-showscale:scroll down so much as show the Scrollup button
*-right:to right of scrollable container
*-bottom:to bottom of scrollable container
*/
$.scrollbtn.defaults = {//default value
SHOWSCALE:100,//More than 100px display button
Right:10,
Bottom:10,
DURATION:200,//back to the top of the page at the time interval
Title: ' Back to top '/Div's title Property
}
}) (JQuery);
$.SCROLLBTN ({
SHOWSCALE:200,//Roll down 200px display button
BOTTOM:20,//Bottom 20px
RIGHT:20//On the right side of 20px
});

Backtotop.rar