☰

Button Go to the Top of Response on ChatGPT.com

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

  1. // ==UserScript==
  2. // @name         Button Go to the Top of Response on ChatGPT.com
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3.2
  5. // @description  Adds a button that scrolls to the top of each response on ChatGPT.com
  6. // @author
  7. // @match        http://*.chatgpt.com/*
  8. // @match        https://*.chatgpt.com/*
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.  
  17.     function addButtons() {
  18.         const responses = document.querySelectorAll('article[data-testid^="conversation-turn-"] > div');
  19.  
  20.         responses.forEach((response, index) => {
  21.             if (response.querySelector('.go-to-top-button')) {
  22.                 return;
  23.             }
  24.  
  25.             const button = document.createElement('button');
  26.             button.textContent = '^';
  27.             button.className = 'go-to-top-button';
  28.             button.style.position = 'absolute';
  29.             button.style.bottom = '10px';
  30.             button.style.right = '10px';
  31.             button.style.zIndex = '1000';
  32.             button.style.padding = '8px 12px';
  33.             button.style.backgroundColor = '#808080';
  34.             button.style.color = '#fff';
  35.             button.style.border = 'none';
  36.             button.style.cursor = 'pointer';
  37.  
  38.             button.addEventListener('click', () => {
  39.                 response.scrollIntoView({ behavior: 'smooth', block: 'start' });
  40.             });
  41.  
  42.             response.style.position = 'relative';
  43.             response.appendChild(button);
  44.         });
  45.  
  46.         // Make only the last button fixed
  47.         const lastButton = responses[responses.length - 1]?.querySelector('.go-to-top-button');
  48.         if (lastButton) {
  49.             lastButton.style.position = 'fixed';
  50.             lastButton.textContent = 'last answer ↑';
  51.             lastButton.style.top = '6px';
  52.             lastButton.style.top = '8px';
  53.             lastButton.style.right = '27px';
  54.             lastButton.style.backgroundColor = '#000000';
  55.             lastButton.style.height = '40px';
  56.         }
  57.     }
  58.  
  59.     function start() {
  60.         addButtons();
  61.     }
  62.  
  63.     const observer = new MutationObserver(() => {
  64.         start();
  65.         // Set position of specific element to absolute
  66.         const targetElement = document.querySelector("body > div.relative.flex.h-full.w-full.overflow-hidden.transition-colors.z-0 > div.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden > main > div.composer-parent.flex.h-full.flex-col.focus-visible\\:outline-0 > div.flex-1.overflow-hidden > div > div > div > div > div")
  67.         if (targetElement) {
  68.             targetElement.style.position = 'absolute';
  69.         }
  70.     });
  71.  
  72.     observer.observe(document.body, { childList: true, subtree: true });
  73.  
  74.     start();
  75. })();