Js implementation of imitating Sina Weibo back to the top

In the 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.

On Taobao, the back to top button is displayed only when the scroll distance of the scroll bar is greater than a certain distance; The return top of Renren is directly on the toolbar at the bottom; Sina micro-blog The return top of is displayed when the rolling height is greater than 0, and the return top effect is a smooth animation effect. The realization of this article is similar to the effect of Sina Weibo. Sina Weibo has launched a new domain name weibo.com.

2、 Return to top function under jQuery

After clicking the button to return to the top, the page will slide to the top with a sound like applying lubricant. At the same time, this button will play hide and seek - disappeared.

The principle of implementation, uh... I guess few people care about it, so I'm too lazy to waste my saliva and just go to the code.

Regardless of the jQuery implementation or the MooTools implementation here, the following CSS code is consistent, as follows:

 .backToTop {
 display: none;
 width: 18px;
 line - height: one point two ;
 padding: 5px zero ;
 background - color: # 000 ;
 color: #fff;
 font - size: 12px;
 text - align: center;
 position: fixed;
 _ position: absolute;
 right: 10px;
 bottom: 100px;
 _ bottom: " auto " ;
 cursor: pointer;
 opacity: . six ;
 filter: Alpha(opacity = sixty );
 }

The js related code is 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: zero }, one hundred and twenty );
 }), $backToTopFun =  function () {
         var st = $(document).scrollTop(), winh = $(window).height();
 (st >  zero ) ? $backToTopEle.show(): $backToTopEle.hide();
         // IE6 Positioning under
         if ( ! window. XMLHttpRequest) {
 $backToTopEle.css( " top " , st + winh -  one hundred and sixty-six );
 }
 };
 $(window).bind( " scroll " , $backToTopFun);
 $( function () { $backToTopFun(); });
 })();

Only a dozen lines of code have realized all the interaction details. You can copy the above code directly into your JavaScript file, and the page will have an effect! By the way, please use jQuery 1.4+.

3、 Implementation of return to top function under MooTools

The effect of the demo page is basically the same as that of the above jQuery demo.

Code section. The CSS code is completely the same as above. The JS 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 /  six ;
         var funScroll =  function () {
 st -= speed;
             if (st <=  zero ) { st =  zero ; }
 window.scrollTo( zero , st);
             if (st >  zero ) { setTimeout(funScroll, twenty ); }
 };
 funScroll();
 }).inject(document.body), $backToTopFun =  function () {
         var st = document.getScroll().y, winh = window.getSize().y;
 (st >  zero ) ? $backToTopEle.setStyle( " display " , " block " ): $backToTopEle.setStyle( " display " , " none " );
         // Positioning under IE6
         if ( ! window. XMLHttpRequest) {
 $backToTopEle.setStyle( " top " , st + winh -  one hundred and sixty-six );
 }
 };
 window.addEvents({
 scroll: $backToTopFun,
 domready: $backToTopFun
 });
 })();

Copying the above code directly can easily achieve the effect in your JS code.

Animation method of MooTools Fx Rolling is not supported. To achieve a smooth rolling effect of the scroll bar, you need to use Fx. Scroll plug-in unit 。 However, obviously, there is no need to use additional plug-ins for the simple functions here, so a timer is directly set to achieve the smooth rolling effect.

Note: The beauty image in the demo page is used to stretch the page height to generate scroll bars.

4、 Conclusion

In fact, the easiest way to achieve the top effect of the page return is to use the tag a and then the href attribute value is directly the # anchor. But this method will generate a # after the URL address.