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-08-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Chat GPT scroll to the top and bottom buttons
// @author       NWP
// @description  Adds buttons to scroll to the top and bottom of the chat on Chat GPT
// @namespace    https://greasyforks.org/users/877912
// @version      0.2
// @license      MIT
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function createButton(onClick, triangleDirection) {
        const button = document.createElement('button');
        const buttonStyle = {
            backgroundColor: '#707070',
            border: 'none',
            borderRadius: '0.5em',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '3.5em',
            height: '2em',
            position: 'relative',
            transition: 'background-color 0.3s',
        };
        Object.assign(button.style, buttonStyle);
        button.addEventListener('click', onClick);

        const triangle = document.createElement('div');
        triangle.style.width = '0';
        triangle.style.height = '0';
        triangle.style.borderLeft = '0.75em solid transparent';
        triangle.style.borderRight = '0.75em solid transparent';
        if (triangleDirection === 'up') {
            triangle.style.borderBottom = '0.75em solid black';
        } else {
            triangle.style.borderTop = '0.75em solid black';
        }
        button.appendChild(triangle);

        button.onmouseenter = function() {
            button.style.backgroundColor = '#9f9f9f';
        };
        button.onmouseleave = function() {
            button.style.backgroundColor = '#707070';
        };

        return button;
    }

    function scrollToTop() {
        const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
        if (target) target.scrollTop = 0;
    }

    function scrollToBottom() {
        const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
        if (target) target.scrollTop = target.scrollHeight;
    }

    function createButtons() {
        const shadowHost = document.createElement('div');
        shadowHost.style.position = 'fixed';
        shadowHost.style.bottom = '3em';
        shadowHost.style.right = '2em';
        shadowHost.style.zIndex = '1000';
        document.body.appendChild(shadowHost);

        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

        const style = document.createElement('style');
        style.textContent = `
            button {
                background-color: #707070;
                border: none;
                border-radius: 0.5em;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 3.5em;
                height: 2em;
                position: relative;
                transition: background-color 0.3s;
            }
            button:hover {
                background-color: #9f9f9f;
            }
            div.triangle-up {
                width: 0;
                height: 0;
                border-left: 0.75em solid transparent;
                border-right: 0.75em solid transparent;
                border-bottom: 0.75em solid black;
            }
            div.triangle-down {
                width: 0;
                height: 0;
                border-left: 0.75em solid transparent;
                border-right: 0.75em solid transparent;
                border-top: 0.75em solid black;
            }
        `;
        shadowRoot.appendChild(style);

        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.alignItems = 'center';
        container.style.gap = '0.25em';
        shadowRoot.appendChild(container);

        const topButton = createButton(scrollToTop, 'up');
        container.appendChild(topButton);
        topButton.firstChild.classList.add('triangle-up');

        const bottomButton = createButton(scrollToBottom, 'down');
        container.appendChild(bottomButton);
        bottomButton.firstChild.classList.add('triangle-down');
    }

    window.addEventListener('load', function() {
        setTimeout(createButtons, 2000);
    });
})();