☰

回到顶部

平时隐藏，鼠标经过页面右端 距离页面top 80%时，会显示按键，点击触发回到顶部

// ==UserScript==
// @name         回到顶部
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  平时隐藏，鼠标经过页面右端 距离页面top 80%时，会显示按键，点击触发回到顶部
// @author       Candy.
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
          //创建盒子
    var candy_div1 = document.createElement("div");
    document.body.appendChild(candy_div1);
    candy_div1.className = 'candy_div1';
    var candy_div2 = document.createElement('div');
    candy_div1.appendChild(candy_div2);
    candy_div2.className = 'candy_div2';

    //鼠标经过显示图标，否则隐藏
    candy_div1.onmouseenter = function () {
      candy_div1.style.cssText = 'background: rgba(0, 0, 0, 0.1);';
      candy_div2.style.cssText = 'border-bottom-color: rgba(0, 0, 0, 0.4);';
    }
    candy_div1.onmouseleave = function () {
      candy_div1.style.cssText = 'background: rgba(0, 0, 0, 0);'
      candy_div2.style.cssText = 'border-bottom-color: rgba(0, 0, 0, 0);'
    }


    //回到顶部
    candy_div1.onclick = function () {
      if (timerID_1) {
        clearInterval(timerID_1);
      }
      var top_1 = document.documentElement.scrollTop;
      var target_1 = 0;
      var step = 30;
      var timerID_1 = setInterval(function () {

        if (top_1 > target_1) {
          top_1 = top_1 - step;
          document.documentElement.scrollTop = top_1;
        } else {
          clearInterval(timerID_1);
        }

      }, 1);
    }

    //添加CSS
    function addCSS(cssText) {
      var style = document.createElement('style'), //创建一个style元素
        head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
      style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
      if (style.styleSheet) { //IE
        var func = function () {
          try { //防止IE中stylesheet数量超过限制而发生错误
            style.styleSheet.cssText = cssText;
          } catch (e) {

          }
        }
        //如果当前styleSheet还不能用，则放到异步中则行
        if (style.styleSheet.disabled) {
          setTimeout(func, 10);
        } else {
          func();
        }
      } else { //w3c
        //w3c浏览器中只要创建文本节点插入到style元素中就行了
        var textNode = document.createTextNode(cssText);
        style.appendChild(textNode);
      }
      head.appendChild(style); //把创建的style元素插入到head中
    }

    addCSS(
      'body{height:2000px;}.candy_div1{position:fixed;top:80%;right:0;width:30px;height:30px;border-radius:10px;background:rgba(0,0,0,0);}.candy_div2{position:relative;left:5px;width:0;height:0;border:10px solid transparent;border-bottom-color:rgba(0,0,0,0);}'
      );

})();