first, the introduction
In a Web page, if the page is high, a return top button is added to make it easy for the user to return to the top quickly.
Among them Taobao is to scroll the scroll distance greater than a certain distance before the display back to the top of the button; The return top of Renren is directly at the bottom of the tool bar; the return top of Sina Weibo is displayed when the scrolling height is greater than 0, and the effect returned to the top is smooth animation. The implementation of this article is similar to the effect of Sina Weibo.
Second, jquery under the return of the top function
You can ruthlessly click here: jquery under the return top demo
As you can see, if the page has a scrolling height, there will be a black background translucent strip with the words "back to the top" in the lower right corner, as shown in the following figure:
Click here "back to the Top" button, the page is like a lubricant, slips to the top of the slide, while the Click button also played Hide-and-seek-disappeared.
The principle of realization, uh ... It is estimated that few people care, so I am too lazy to waste saliva, directly on the code.
Either the jquery implementation here or the MooTools implementation, the following CSS code is consistent, as follows:
CSS code:
Copy Code code as follows:
. backtotop {
Display:none;
width:18px;
line-height:1.2;
padding:5px 0;
Background-color: #000;
Color: #fff;
font-size:12px;
Text-align:center;
position:fixed;
_position:absolute;
right:10px;
bottom:100px;
_bottom: "Auto";
Cursor:pointer;
Opacity:. 6;
Filter:alpha (opacity=60);
}
JS Code:
Copy Code code as follows:
(function () {
var $backToTopTxt = "Back to top", $backToTopEle = $ (' <div class= ' backtotop ' ></div> '). Appendto ($ ("body")
. 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. Show (): $backToTopEle. Hide ();
Positioning under the IE6
if (!window. XMLHttpRequest) {
$backToTopEle. CSS ("Top", St + winh-166);
}
};
$ (window). Bind ("scroll", $backToTopFun);
$ (function () {$backToTopFun ();});
})();
three, MooTools return to the top of the function to achieve
You can ruthlessly click here: MooTools to return to the top demo
The result of the demo page is basically consistent with the above jquery demo.
Code section. CSS code completely ditto. The JS code is as follows:
Copy Code code as follows:
(function () {
var $backToTopTxt = "Back to top", $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);}
};
Funscroll ();
}). Inject (document.body), $backToTopFun = function () {
var st = Document.getscroll (). Y, Winh = Window.getsize (). Y;
(St > 0)? $backToTopEle. SetStyle ("Display", "block"): $backToTopEle. SetStyle ("Display", "none");
Positioning under the IE6
if (!window. XMLHttpRequest) {
$backToTopEle. SetStyle ("Top", St + winh-166);
}
};
Window.addevents ({
Scroll: $backToTopFun,
Domready: $backToTopFun
});
})();
Direct copy of the above code in your JS code is easy to achieve results.
MooTools Animation Method FX does not support scrolling, and you need to use the Fx.scroll plug-in to achieve smooth scrolling of the scroll bars. However, obviously, there is no need for the simple features to use additional plug-ins, so directly set a timer to achieve smooth scrolling effect.
Note: The beauty picture in the demo page is to open the page height so that the scroll bar is produced.
Four, the conclusion
In fact, the implementation of the top effect page returns the simplest is a tag and then href attribute value directly is # Anchor point on OK. But this method produces a "#" behind the URL address. For anchor-related content you can see my previous "about anchor jump and related operations and Plug-ins under jquery" article.
