One, the preface.
backToTop {
display: none;
width: 18px;
the line - height: 1.2;
the padding: 5 0px;
background - color: #000;
color: #FFF;
the font size: 12px;
text - align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity:. 6;
filter: Alpha (opacity=60);


(function() {
var $backToTopTxt="返回顶部", $backToTopEle=$('

.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun=function() {
var st=$(document).scrollTop(), winh=$(window).height();
(st> 0)? $ $backToTopEle.hide();
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });

(function() {
var $backToTopTxt="返回顶部", $backToTopEle=new Element("div", {
"class": "backToTop",
title: $backToTopTxt
}).set("text", $backToTopTxt).addEvent("click", function() {
var st=document.getScroll().y, speed=st/6;
var funScroll=function() {
st -=speed;
if (st <=0) { st=0; }
window.scrollTo(0, st);
if (st> 0) { setTimeout(funScroll, 20); }
}).inject(document.body), $backToTopFun=function() {
var st=document.getScroll().y, winh=window.getSize().y;
(st> 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");
if (!window.XMLHttpRequest) {
$backToTopEle.setStyle("top", st + winh - 166);
scroll: $backToTopFun,
domready: $backToTopFun

directly copy the code above in your javascript code will be easily implement effect.

MooTools Fx does not support rolling animation method, in order to achieve smooth scrolling effect need to use the Scroll bar Fx. Scroll plug-in. But, obviously, the simple function is not necessary to use additional plug-ins, so directly set a timer to achieve the smooth scrolling effect.

note: the role is beautiful pictures open page height in the demo page to create a scroll bar.

4, endnotes
the simplest make a page to return to the top effect is actually a label then href attribute value is directly #anchor point with respect to ok. But this method will be behind the url address to create a "#". About anchor related content you can see my "about anchor jump and related operations under the jQuery plugin".

you might be interested in the article:

  • jQuery implementation pull fixed at the top of the page display and disappear automatically (firefox)
  • js + jQuery return at the top of the function of how to implement
  • ASP.NET jQuery instance 9 return top effect was achieved by control the hyperlink
  • jQuery based back button at the top of the page
  • effect based on jQuery's return to the top (compatible with IE6)
  • jQuery moving scroll pages back to the top animation effects (compatible with Chrome)
  • jQuery jumped to the top and bottom of the animation 2 code simple implementation

This concludes the body part