使用油猴脚本，实现回到顶部

经常浏览网页，看到很多网站都有回到顶部的按钮，而有些网站没有这个功能，就想用脚本自己实现一下，这样所有页面都可以使用了。

优化：

版本1

加入了jQuery语法的支持

// ==UserScript==
// @name         ToTop
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       JackMeng
// @match        http*://*
// @include      *
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @iconURL      https://www.cnblogs.com/favicon.ico
// @grant        none
// @require      https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js
// @run-at       document-end
// @noframes
// ==/UserScript==

//添加样式
function AddStyle()
{
    var styleRule = $(`<style type='text/css'>
    .upShow {
    position: fixed;
    bottom: 6px;
    right: 4px;
    z-index: 1001;
    cursor: pointer;
    height: 35px;
    width:  35px;
    text-align: center;
    line-height: 35px;
    opacity: 0.8;
    border-radius: 50%;/*决定四角圆弧*/
    box-shadow: 0 2px 4px 1px rgba(0,0,0,.6);
    background-color:red;
    transition: all .4s ease;/*延时变化*/
    display: flex;
    align-items: center;
    flex-direction: column;
}

.upShow:hover{background-color: #0dd;}
.upShow:hover .upArrow,
.upShow:hover .upArrow:before,
.upShow:hover .upArrow:after{border-color: #fff;}

.upArrow {
    display: inline-block;
    border-width: 2px 0 0 0;
    border-color: #666;
    border-style: solid;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition: all .4s ease;/*延时变化*/
    background-color:transparent;
    height: 16px;
    width:  16px;
    margin: 10px 0;
    padding: 2px 0;
}
.upArrow:before{
    content: "";
    display: inline-block;
    height: 10px;
    width:  10px;
    transform: rotate(45deg);
    border-width: 2px 0 0 2px;
    border-color: #666;
    border-style: solid;
}
.upArrow:after{
    content: "";
    position: absolute;
    display: inline-block;
    height: 14px;
    right:16px;
    border-width: 0 0 0 2px;
    border-color: #666;
    border-style: solid;
}
    </style>`).prependTo('html');
    styleRule.attr('id', 'arrowCss');
    styleRule.append('#articleContentId{ color: red; }');
}

//给页面添加元素
function AddElem()
{
    var toTop=$(`<span id="gotoTop" class="upShow" title="返回顶部">
          <i class="upArrow"></i>
       </span>`).prependTo($("body"));

    //toTop[0].onclick = ()=>gotoTop(500);
    //toTop[0].onclick = ()=>{getBlogData(21);}

    return toTop[0];
}


function getBlogData(num)
{
    var host = window.location.host;
    console.log("======================"+num);
}

function bindEvent(obj,minHeight){

    // 定义点击返回顶部图标后向上滚动的动画
    $("#gotoTop").click(
        function(){
            $('html,body').animate({scrollTop:'0px'},'slow');
        });

    // 获取页面的最小高度，无传入值则默认为600像素
    minHeight = minHeight ? minHeight : 600;

    // 为窗口的scroll事件绑定处理函数
    $(window).scroll(function(){
        // 获取窗口的滚动条的垂直滚动距离
        var sTop = $(window).scrollTop();
        // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
        if( sTop > minHeight){
            $("#gotoTop").fadeIn(300);
        }else{
            $("#gotoTop").fadeOut(300);
        }
    });
}

(function(){
    'use strict';
    // Your code here...
    if (window.top == window.self)
    {
        //插入样式
        AddStyle();
        //插入元素
        var a = AddElem();
        bindEvent(a,100);
    }

})();

 

版本2

之前加入了jQuery的支持，因部分网站对jQuery的冲突，导致脚本无法运行，现在进行修复。

// ==UserScript==
// @name         ToTop
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  try to take over the world!
// @author       JackMeng
// @match        http*://*
// @include      *
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @iconURL      https://www.cnblogs.com/favicon.ico
// @grant        none
// @run-at       document-end
// @noframes
// ==/UserScript==

var S=function(t){return document.querySelector(t)};
var SS=(p)=>document.querySelector(p);


//添加样式
function AddStyle()
{
    var styleRule = document.createElement('style');
    styleRule.type='text/css';
    styleRule.id = 'arrowCss';
    var h = SS("head")
    h.insertBefore(styleRule, h.firstChild);
    styleRule.innerHTML=`
    .upShow {
    position: fixed;
    bottom: 6px;
    right: 4px;
    z-index: 1001;
    cursor: pointer;
    height: 35px;
    width:  35px;
    text-align: center;
    line-height: 35px;
    opacity: 0.8;
    border-radius: 50%;/*决定四角圆弧*/
    box-shadow: 0 2px 4px 1px rgba(0,0,0,.6);
    background-color:red;
    transition: all .4s ease;/*延时变化*/
    display: flex;
    align-items: center;
    flex-direction: column;
}

.upShow:hover{background-color: #0dd;}
.upShow:hover .upArrow,
.upShow:hover .upArrow:before,
.upShow:hover .upArrow:after{border-color: #fff;}

.upArrow {
    display: inline-block;
    border-width: 2px 0 0 0;
    border-color: #666;
    border-style: solid;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition: all .4s ease;/*延时变化*/
    background-color:transparent;
    height: 16px;
    width:  16px;
    margin: 10px 0;
    padding: 2px 0;
}
.upArrow:before{
    content: "";
    display: inline-block;
    height: 10px;
    width:  10px;
    transform: rotate(45deg);
    border-width: 2px 0 0 2px;
    border-color: #666;
    border-style: solid;
}
.upArrow:after{
    content: "";
    position: absolute;
    display: inline-block;
    height: 14px;
    right:16px;
    border-width: 0 0 0 2px;
    border-color: #666;
    border-style: solid;
}
    `;
    styleRule.append('#articleContentId{ color: red; }');
}

//给页面添加元素
function AddElem()
{
    var toTop = document.createElement('p');
    // toTop.id = 'gotoTop';
    // toTop.class='upShow';
    toTop.style = 'margin : 0;';
    // toTop.title="返回顶部"
    var h = SS("body")
    h.insertBefore(toTop, h.firstChild);
    toTop.innerHTML=`<span id="gotoTop" class="upShow" title="返回顶部">
          <i class="upArrow"></i>
       </span>`;

    return toTop.firstChild;
}


function bindEvent(obj,minHeight){
    console.log("ToTop======================绑定事件");
    // 定义点击返回顶部图标后向上滚动的动画
    SS("#gotoTop").onclick=()=>{
        if($()["animate"])
            $('html,body').animate({scrollTop:'0px'},'slow');
        else
            document.body.scrollTop = document.documentElement.scrollTop = 0;
    };

    // 获取页面的最小高度，无传入值则默认为600像素
    minHeight = minHeight ? minHeight : 600;

    // 为窗口的scroll事件绑定处理函数
    window.onscroll=()=>{
        // 获取窗口的滚动条的垂直滚动距离
        var sTop =  document.documentElement.scrollTop || document.body.scrollTop;
        // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
        if($()["fadeIn"])
        {
            if( sTop > minHeight){
                $("#gotoTop").fadeIn(200);
            }else{
                $("#gotoTop").fadeOut(200);
            }
        }
    };
}


(function(){
    'use strict';
    // Your code here...
    if (window.top == window.self)
    {
        //插入样式
        AddStyle();
        //插入元素
        var a = AddElem();
        bindEvent(a,100);
    }

})();