Jquery implementation code to return to the top of Sina Weibo_jquery

1. Introduction

In a web page, if the page is high, in order to facilitate the user to quickly return to the top, a return to top button will be added.

Among them, Taobao requires the scrolling distance of the scroll bar to be greater than a certain distance before the return to top button is displayed; Renren's return to top is directly on the bottom toolbar; Sina Weibo's return to top is at the scroll height. It is displayed when it is greater than 0, and the effect of returning to the top is a smooth animation effect. The implementation of this article is similar to this effect of Sina Weibo.

2. Return to top function under jQuery

You can click here: Back to top demo under jQuery

You can see that if the page has a scroll height, there will be a small semi-transparent bar with a black background and the words "Return to Top" in the lower right corner, as shown in the picture below:

Click here to "Return to Top" "After the button with the words ", the page seemed to have been lubricated, sliding to the top with a sudden sound. At the same time, the button that should be clicked also played hide and seek - disappeared.

As for the implementation principle, well... few people probably care about it, so I am too lazy to waste my words and go straight to the code.

Whether it is the jQuery implementation here or the MooTools implementation, the following CSS code is consistent, as follows:
CSS code:

Copy code The code is 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 The code is as follows:

(function() {
var $backToTopTxt = "Back to Top", $backToTopEle = $('

'). 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 IE6
if (!window.XMLHttpRequest) {
$backToTopEle.css(" top", st winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();

3. Implementation of the return to top function under MooTools

You can click here : The effect of the return to top demo

demo page under MooTools is basically the same as the effect under the jQuery demo above.

Code part. The CSS code is exactly the same as above. The JS code is as follows:

Copy code The code is 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");
//IE6 Positioning under
if (!window.XMLHttpRequest) {
$backToTopEle.setStyle("top", st winh - 166);
}
};
window.addEvents({
scroll: $backToTopFun,
domready: $backToTopFun
});
})();

Copy the above code directly and easily achieve the effect in your JS code.

The animation method Fx of MooTools does not support scrolling. To achieve the smooth scrolling effect of the scroll bar, you need to use the Fx.Scroll plug-in. However, obviously, there is no need to use additional plug-ins for the simple function here, so a timer is directly set to achieve a smooth scrolling effect.

Note: The beauty pictures in the demo page are used to expand the height of the page to create scroll bars.

4. Conclusion
In fact, the simplest way to achieve the effect of returning the page to the top is the a tag, and then the href attribute value is directly #anchor and it is ok. But this method will generate a "#" after the url address. For more information about anchor points, you can refer to my previous article "About anchor point jumps and related operations and plug-ins under jQuery".