Chat GPT scroll to the top and bottom buttons

Adds buttons to scroll to the top and bottom of the chat on Chat GPT

目前为 2024-07-14 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name Chat GPT scroll to the top and bottom buttons
  3. // @author NWP
  4. // @description Adds buttons to scroll to the top and bottom of the chat on Chat GPT
  5. // @namespace https://greasyfork.org/users/877912
  6. // @version 0.1
  7. // @license MIT
  8. // @match https://chatgpt.com/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. function createButton(onClick, triangleDirection) {
  16. const button = document.createElement('button');
  17. const buttonStyle = {
  18. backgroundColor: '#707070',
  19. border: 'none',
  20. borderRadius: '0.5em',
  21. cursor: 'pointer',
  22. display: 'flex',
  23. alignItems: 'center',
  24. justifyContent: 'center',
  25. width: '3.5em',
  26. height: '2em',
  27. position: 'relative',
  28. transition: 'background-color 0.3s',
  29. };
  30. Object.assign(button.style, buttonStyle);
  31. button.addEventListener('click', onClick);
  32.  
  33. const triangle = document.createElement('div');
  34. triangle.style.width = '0';
  35. triangle.style.height = '0';
  36. triangle.style.borderLeft = '0.75em solid transparent';
  37. triangle.style.borderRight = '0.75em solid transparent';
  38. if (triangleDirection === 'up') {
  39. triangle.style.borderBottom = '0.75em solid black';
  40. } else {
  41. triangle.style.borderTop = '0.75em solid black';
  42. }
  43. button.appendChild(triangle);
  44.  
  45. button.onmouseenter = function() {
  46. button.style.backgroundColor = '#9f9f9f';
  47. };
  48. button.onmouseleave = function() {
  49. button.style.backgroundColor = '#707070';
  50. };
  51.  
  52. return button;
  53. }
  54.  
  55. function scrollToTop() {
  56. const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
  57. if (target) target.scrollTop = 0;
  58. }
  59.  
  60. function scrollToBottom() {
  61. const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
  62. if (target) target.scrollTop = target.scrollHeight;
  63. }
  64.  
  65. window.addEventListener('load', function() {
  66. const shadowHost = document.createElement('div');
  67. shadowHost.style.position = 'fixed';
  68. shadowHost.style.bottom = '3em';
  69. shadowHost.style.right = '2em';
  70. shadowHost.style.zIndex = '1000';
  71. document.body.appendChild(shadowHost);
  72.  
  73. const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  74.  
  75. const container = document.createElement('div');
  76. container.style.display = 'flex';
  77. container.style.flexDirection = 'column';
  78. container.style.alignItems = 'center';
  79. container.style.gap = '0.25em';
  80. shadowRoot.appendChild(container);
  81.  
  82. const topButton = createButton(scrollToTop, 'up');
  83. container.appendChild(topButton);
  84.  
  85. const bottomButton = createButton(scrollToBottom, 'down');
  86. container.appendChild(bottomButton);
  87. });
  88. })();