返回顶部简易代码

2020-10-21 09:18:37 建站教程 167

我们在做网站的时间，经常会遇到返回顶部的效果，鼠标滚动一定高度之后，会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置，位置始终不变。当滚动的距离高度小于指定高度后，该“返回顶部”的标签消失。另外，“返回顶部标签”绑定点击事件，通过鼠标点击，实现文档回到顶部的效果。

直接放js就可以显示

(function() {
  var btnId = '__gotop';
  var isIE = !!window.ActiveXObject && /msie (d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

  function $() {
  return document.getElementById(arguments[0]);
  }

  function getScrollTop() {
  return ('pageYOffset' in window) ? window.pageYOffset
    : document.patMode === "Backpat"
    && document.body.scrollTop
    || document.documentElement.scrollTop ;
  }  

  function bindEvent(event, func) {
  if (window.addEventListener) {
    window.addEventListener(event, func, false);
  } else if (window.attachEvent) {
    window.attachEvent('on' + event, func);
  }
  }

  bindEvent('load',
  function() {
    var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:20px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

    if (isIE && isIE < 7) {
      css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
      var style = document.createStyleSheet();
      style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
    }

    var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
    var el = document.createElement('DIV');
    el.id = btnId;
    el.style.cssText = css;
    el.innerHTML = html;
    document.body.appendChild(el);

    el.onclick = function() {
      (function() {
      var top = getScrollTop();
      if (top > 0) {
        window.scrollTo(0, top / 1.2)
        setTimeout(arguments.callee, 10);
      }
      })();
    };

    el.onmouseover = function() {
      $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
      $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
    };

    el.onmouseout = function() {
      $(btnId).firstChild.style.borderBottom = '14px solid #fff';
      $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
    };
  }
  );

  bindEvent('scroll',
  function() {
    var top = getScrollTop(), display = 'none';

    if (top > 0) {
      display = 'block';
    }

    if ($(btnId)) $(btnId).style.display = display;
  });
})();