☰

Scroll to Top of Response Button on ChatGPT.com

Adds a button that scrolls to the top of each response on ChatGPT.com

当前为 2024-11-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Scroll to Top of Response Button on ChatGPT.com
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Adds a button that scrolls to the top of each response on ChatGPT.com
  6. // @author       Jeff Matt
  7. // @license      MIT
  8. // @match        http://*.chatgpt.com/*
  9. // @match        https://*.chatgpt.com/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     function addButtons() {
  17.         console.log("Executing addButtons");
  18.         // Selects all responses on ChatGPT.com
  19.         const responses = document.querySelectorAll('article[data-testid^="conversation-turn-"]');
  20.  
  21.         responses.forEach((response, index) => {
  22.             // Checks if the button has already been added to avoid duplicates
  23.             if (response.querySelector('.scroll-to-top-button')) {
  24.                 console.log("Button already exists, skipping");
  25.                 return;
  26.             }
  27.  
  28.             console.log(`Adding 'Scroll to Top' button to response ${index}`);
  29.             // Creates the button and sets its properties
  30.             const button = document.createElement('button');
  31.             button.textContent = '^';
  32.             button.className = 'scroll-to-top-button';
  33.             button.style.position = 'absolute';
  34.             button.style.bottom = '10px';
  35.             button.style.right = '10px';
  36.             button.style.zIndex = '1000';
  37.             button.style.padding = '8px 12px';
  38.             button.style.backgroundColor = '#808080';  // Gray
  39.             button.style.color = '#fff';
  40.             button.style.border = 'none';  // No border
  41.             button.style.cursor = 'pointer';
  42.  
  43.             // Adds a click event to the button to scroll to the top of the corresponding response
  44.             button.addEventListener('click', () => {
  45.                 console.log(`Clicked 'Scroll to Top' button for response ${index}`);
  46.                 response.scrollIntoView({ behavior: 'smooth' });
  47.             });
  48.  
  49.             // Sets relative position for the response element and adds the button
  50.             response.style.position = 'relative';
  51.             response.appendChild(button);
  52.         });
  53.     }
  54.  
  55.     function start() {
  56.         console.log("Executing start");
  57.         addButtons();
  58.     }
  59.  
  60.     // Creates an observer to detect DOM changes and initiate the functions
  61.     const observer = new MutationObserver(() => {
  62.         console.log("Mutation detected, executing start");
  63.         start();
  64.     });
  65.  
  66.     observer.observe(document.body, { childList: true, subtree: true });
  67.  
  68.     // Executes the start function when the script loads
  69.     start();
  70. })();