在网页生成返回顶部和底部按钮，点击按钮即可返回顶部或底部。管鞋原作者
目前为
// ==UserScript==
// @name 返回顶部和底部-美化版
// @version 1.0.0
// @description 在网页生成返回顶部和底部按钮，点击按钮即可返回顶部或底部。管鞋原作者
// @author 沐雨
// @license MIT
// @match *://*/*
// @grant GM_info
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_getResourceText
// @resource css https://at.alicdn.com/t/c/font_3835736_lb5n0dgzerl.css
// @require http://code.jquery.com/jquery-1.11.0.min.js
// @require https://cdn.bootcdn.net/ajax/libs/interact.js/1.10.17/interact.min.js
// @namespace https://www.yuxi.com/
// ==/UserScript==
;(function () {
'use strict'
var TBLink = function () {
var $ = $ || window.$
var $doc = $(document)
var $win = $(window)
const iconFont = GM_getResourceText('css')
var CreateHtml = function () {
var html = `
<div id="goTopBottom">
<span class="t-btn gotop" title="返回顶部" style="opacity: 0;">
<i class="iconfont icon-top"></i>
</span>
<span class="t-btn bottom" title="返回底部" style="opacity: 0;">
<i class="iconfont icon-top"></i>
</span>
</div>
`
$('html body').append(html)
}
var CreateStyle = function () {
var style =
'#goTopBottom {position: fixed;bottom: 75px;right: 15px;z-index: 999999;display: flex;flex-direction: column;row-gap: 5px; }#goTopBottom .top {opacity: 0;}#goTopBottom .t-btn {display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;cursor: pointer;color: #fff;border-radius: 4px;background-image: linear-gradient(to top right,#6966ff,#37e2d3);background-size: 100% 100%;}#goTopBottom .bottom {opacity: 0;transform: rotateX(180deg);}'
GM_addStyle(iconFont)
GM_addStyle(style)
}
var GoTB = function () {
var upperLimit = 100
var scrollSpeed = 500
var fadeSpeed = 300
var $top = $('#goTopBottom .gotop')
var $bottom = $('#goTopBottom .bottom')
if (getScrollTop() > upperLimit) {
$top.stop().fadeTo(0, 1, function () {
$top.show()
})
}
if (getScrollTop() + $(window).height() < $doc.height() - upperLimit) {
$bottom.stop().fadeTo(0, 1, function () {
$bottom.show()
})
}
$doc.scroll(function () {
if (getScrollTop() > upperLimit) {
$top.stop().fadeTo(fadeSpeed, 1, function () {
$top.css('visibility', 'visible')
})
} else {
$top.stop().fadeTo(fadeSpeed, 0, function () {
$top.css('visibility', 'hidden')
})
}
if (getScrollTop() + $(window).height() < $doc.height() - upperLimit) {
$bottom.stop().fadeTo(fadeSpeed, 1, function () {
$bottom.css('visibility', 'visible')
})
} else {
$bottom.stop().fadeTo(fadeSpeed, 0, function () {
$bottom.css('visibility', 'hidden')
})
}
})
$('#goTopBottom span').click(function () {
var $this = $(this)
var clsName = $this.attr('class')
const scrollHeight = clsName.includes('gotop') ? 0 : $doc.height()
$('html, body').animate({
scrollTop: scrollHeight
},scrollSpeed)
return false
})
}
var getScrollTop = function () {
var scrollTop = $doc.scrollTop() || $('html,body').scrollTop()
return scrollTop
}
/**
* 拖拽
*/
function dragging() {
var position = GM_getValue('gtb_pos') || {}
$('#goTopBottom span')
.off('.gtb')
.on({
'mouseover.gtb': function () {
//$(this).css("cursor","move");
},
'mousedown.gtb': function (el) {
var move = true
var $gtbBox = $('#goTopBottom')
var x = el.pageX - $gtbBox.offset().left
var y = el.pageY - $gtbBox.offset().top
$doc.on({
'mousemove.gtb': function (docEl) {
if (move) {
var x1 = docEl.pageX - x
var y1 = docEl.pageY - y
$gtbBox.offset({
left: x1,
top: y1
})
}
},
'mouseup.gtb': function () {
move = false
$doc.off('.gtb')
}
})
}
})
}
this.init = function () {
CreateStyle()
CreateHtml()
dragging()
GoTB()
}
}
var tbl = new TBLink()
tbl.init()
})()