js平滑返回顶部功能

head里添加

<style type="text/css">

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

}

</style>

 

body里添加

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

<script type="text/javascript">

(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); }

       };

       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下的定位

       if (!window.XMLHttpRequest) {

           $backToTopEle.setStyle("top", st + winh - 166);    

       }

   };

   window.addEvents({

       scroll: $backToTopFun,

       domready: $backToTopFun

   });

})();

</script>