// ==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/
// @downloadURL none
// ==/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()
})()