(改)Scroll To Top/Bottom Button

Add buttons to scroll to top and bottom of page in the bottom right corner of the screen

  1. // ==UserScript==
  2. // @name (改)Scroll To Top/Bottom Button
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.3
  5. // @description Add buttons to scroll to top and bottom of page in the bottom right corner of the screen
  6. // @match *://*/*
  7. // @grant GM_addStyle
  8. // @license MIT
  9. // 修改自 https://gf.qytechs.cn/zh-CN/scripts/461812-scroll-to-top-bottom-button
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. if (window.self === window.top && !window.frameElement) {
  16. var styles = `
  17. .scroll-to-btn {
  18. position: fixed;
  19. right: 20px;
  20. font-size: 50px;
  21. border: none;
  22. color: white;
  23. border-radius: 10%;
  24. cursor: pointer;
  25. z-index: 9999;
  26. background-color: transparent;
  27. filter: grayscale(90%);
  28. }
  29. .scroll-to-btn.top {
  30. bottom: calc(50% + 30px); /* Center vertically */
  31. }
  32. .scroll-to-btn.bottom {
  33. bottom: calc(50% - 30px); /* Center vertically */
  34. }
  35. `;
  36.  
  37. GM_addStyle(styles);
  38.  
  39. var scrollToTopBtn = document.createElement("button");
  40. scrollToTopBtn.innerText = "🔼";
  41. scrollToTopBtn.classList.add("scroll-to-btn", "top");
  42. scrollToTopBtn.addEventListener("click", function() {
  43. window.scrollTo({top: 0, behavior: 'auto'});
  44. });
  45.  
  46. var scrollToBottomBtn = document.createElement("button");
  47. scrollToBottomBtn.innerText = "🔽";
  48. scrollToBottomBtn.classList.add("scroll-to-btn", "bottom");
  49. scrollToBottomBtn.addEventListener("click", function() {
  50. window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth',timingFunction: 'cubic-bezier(0,.84,.49,.99)'});
  51. });
  52.  
  53. document.body.appendChild(scrollToTopBtn);
  54. document.body.appendChild(scrollToBottomBtn);
  55. }
  56. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址