☰

Chat GPT scroll to the top and bottom buttons

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

  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.4
  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.             background-color: #707070;
  19.             border: none;
  20.             border-radius: 0.5em;
  21.             cursor: pointer;
  22.             display: flex;
  23.             align-items: center;
  24.             justify-content: center;
  25.             width: 3.5em;
  26.             height: 2em;
  27.             position: relative;
  28.             transition: background-color 0.3s;
  29.         `;
  30.         button.setAttribute('style', buttonStyle);
  31.         button.addEventListener('click', onClick);
  32.  
  33.         const triangle = document.createElement('div');
  34.         const triangleStyle = `
  35.             width: 0;
  36.             height: 0;
  37.             border-left: 0.75em solid transparent;
  38.             border-right: 0.75em solid transparent;
  39.         `;
  40.         if (triangleDirection === 'up') {
  41.             triangle.setAttribute('style', triangleStyle + 'border-bottom: 0.75em solid black;');
  42.         } else {
  43.             triangle.setAttribute('style', triangleStyle + 'border-top: 0.75em solid black;');
  44.         }
  45.         button.appendChild(triangle);
  46.  
  47.         button.onmouseenter = function() {
  48.             button.style.backgroundColor = '#9f9f9f';
  49.         };
  50.         button.onmouseleave = function() {
  51.             button.style.backgroundColor = '#707070';
  52.         };
  53.  
  54.         return button;
  55.     }
  56.  
  57.     function scrollToTop() {
  58.         // const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
  59.         const target = document.querySelector('div.flex.h-full.flex-col.overflow-y-auto');
  60.         if (target) target.scrollTop = 0;
  61.     }
  62.  
  63.     function scrollToBottom() {
  64.         // const target = Array.from(document.querySelectorAll('div.flex.h-full.flex-col.overflow-y-auto')).filter(el => !el.className.includes('full'))[0];
  65.         const target = document.querySelector('div.flex.h-full.flex-col.overflow-y-auto');
  66.         if (target) target.scrollTop = target.scrollHeight;
  67.     }
  68.  
  69.     function createButtons() {
  70.         if (document.querySelector('div[part="scroll-buttons"]')) return;
  71.  
  72.         const shadowHost = document.createElement('div');
  73.         shadowHost.style.position = 'fixed';
  74.         shadowHost.style.bottom = '3em';
  75.         shadowHost.style.right = '2em';
  76.         shadowHost.style.zIndex = '1000';
  77.         shadowHost.setAttribute('part', 'scroll-buttons');
  78.         document.body.appendChild(shadowHost);
  79.  
  80.         const shadowRoot = shadowHost.attachShadow({ mode: 'closed' });
  81.  
  82.         const container = document.createElement('div');
  83.         container.style.display = 'flex';
  84.         container.style.flexDirection = 'column';
  85.         container.style.alignItems = 'center';
  86.         container.style.gap = '0.25em';
  87.         shadowRoot.appendChild(container);
  88.  
  89.         const topButton = createButton(scrollToTop, 'up');
  90.         container.appendChild(topButton);
  91.  
  92.         const bottomButton = createButton(scrollToBottom, 'down');
  93.         container.appendChild(bottomButton);
  94.     }
  95.  
  96.     function ensureButtonsDrawn() {
  97.         createButtons();
  98.  
  99.         const interval = setInterval(function() {
  100.             if (document.querySelector('div[part="scroll-buttons"]')) {
  101.                 clearInterval(interval);
  102.             } else {
  103.                 createButtons();
  104.             }
  105.         }, 1000);
  106.     }
  107.  
  108.     document.addEventListener('visibilitychange', function() {
  109.         if (document.visibilityState === 'visible') {
  110.             ensureButtonsDrawn();
  111.         }
  112.     });
  113.  
  114.     window.addEventListener('load', function() {
  115.         setTimeout(ensureButtonsDrawn, 500);
  116.     });
  117. })();