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 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Scroll to Top of Response Button on ChatGPT.com
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Adds a button that scrolls to the top of each response on ChatGPT.com
// @author       Jeff Matt
// @license      MIT
// @match        http://*.chatgpt.com/*
// @match        https://*.chatgpt.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addButtons() {
        console.log("Executing addButtons");
        // Selects all responses on ChatGPT.com
        const responses = document.querySelectorAll('article[data-testid^="conversation-turn-"]');

        responses.forEach((response, index) => {
            // Checks if the button has already been added to avoid duplicates
            if (response.querySelector('.scroll-to-top-button')) {
                console.log("Button already exists, skipping");
                return;
            }

            console.log(`Adding 'Scroll to Top' button to response ${index}`);
            // Creates the button and sets its properties
            const button = document.createElement('button');
            button.textContent = '^';
            button.className = 'scroll-to-top-button';
            button.style.position = 'absolute';
            button.style.bottom = '10px';
            button.style.right = '10px';
            button.style.zIndex = '1000';
            button.style.padding = '8px 12px';
            button.style.backgroundColor = '#808080';  // Gray
            button.style.color = '#fff';
            button.style.border = 'none';  // No border
            button.style.cursor = 'pointer';

            // Adds a click event to the button to scroll to the top of the corresponding response
            button.addEventListener('click', () => {
                console.log(`Clicked 'Scroll to Top' button for response ${index}`);
                response.scrollIntoView({ behavior: 'smooth' });
            });

            // Sets relative position for the response element and adds the button
            response.style.position = 'relative';
            response.appendChild(button);
        });
    }

    function start() {
        console.log("Executing start");
        addButtons();
    }

    // Creates an observer to detect DOM changes and initiate the functions
    const observer = new MutationObserver(() => {
        console.log("Mutation detected, executing start");
        start();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Executes the start function when the script loads
    start();
})();
欢迎访问Greasy Fork镜像
