莉丝前端

今天没事情干，写了一个返回顶部和到页面底部的插件，直接页面引入JS即可， 没有加配置文件，有定制需要的直接改js吧

效果就是网站右下的那个。

<script src="../js/topdown.js" type="text/javascript"></script>

JS代码如下：

<script>
  (function(window, undefined) {
    topDown = window.topDown = {
      goTop: function() {
        var acceleration = 0.1;
        var y = document.body.scrollTop;
        var speed = 1 + acceleration;
        window.scrollTo(0, Math.floor(y / speed));
        if (y > 0) {
          window.setTimeout("topDown.goTop()", 16);
        }
      },
      goDown: function() {
        if (window.jQuery) {
          $('body').animate({
            scrollTop: document.body.offsetHeight
          },
          500);
        } else {
          window.scrollTo(0, document.body.offsetHeight);
        }
      }
    };
    function addClickEvent(obj, eventType, fn) {
      obj.addEventListener ? obj.addEventListener(eventType, fn, false) : obj.attachEvent("on" + eventType, fn);
    }
    var wrap = document.createElement("div"),
    topDiv = document.createElement("div"),
    downDiv = document.createElement("div"),
    cssText = "width: 40px;height: 39px;cursor: pointer;opacity:0.20;" + "border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:none;" + "background-color:#000;background-repeat:no-repeat;background-position:center";
    wrap.style.cssText = "bottom: 50px;height: 80px;position: fixed;right: 9px;width: 40px;";
    topDiv.style.cssText = "background-image: url(../img/top.png)goTop.png);" + cssText;
    downDiv.style.cssText = "background-image: url(../img/down.png);" + cssText;
    addClickEvent(topDiv, 'click', topDown.goTop);
    addClickEvent(downDiv, 'click', topDown.goDown);
    addClickEvent(topDiv, 'mouseover',
    function() {
      topDiv.style.opacity = "0.4";
    });
    addClickEvent(downDiv, 'mouseover',
    function() {
      downDiv.style.opacity = "0.4";
    });
    addClickEvent(topDiv, 'mouseout',
    function() {
      topDiv.style.opacity = "0.2";
    });
    addClickEvent(downDiv, 'mouseout',
    function() {
      downDiv.style.opacity = "0.2";
    });
    wrap.appendChild(topDiv);
    wrap.appendChild(downDiv);
    if (document.getElementsByTagName('body').length == 0) {
      window.onload = function() {
        document.getElementsByTagName('body')[0].appendChild(wrap);
        if (document.documentElement.clientHeight < window.screen.height) {
          downDiv.style.display = "block";
        }
      };
    } else {
      document.getElementsByTagName('body')[0].appendChild(wrap);
      if (document.documentElement.clientHeight < window.screen.height) {
        downDiv.style.display = "block";
      }
    }
    window.onscroll = function() {
      if (document.body.scrollTop > 100) {
        topDiv.style.display = "block";
        topDiv.style.opacity = "0.2";
      } else {
        topDiv.style.display = "none";
      }
    };
  })(window);
</script>