Scroll to Bottom Button

Add a button to scroll to the bottom of the website

Per 26-02-2025. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Advertisement:

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

Advertisement:

// ==UserScript==
// @name         Scroll to Bottom Button
// @name:zh      底部按钮
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Add a button to scroll to the bottom of the website
// @description:zh
// @author       ghzxs
// @match        *://*/*
// @license     MIT
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Base64-encoded SVG data
    const base64Icon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+';

    // Create the button
    const button = document.createElement('button');
    const img = document.createElement('img');
    img.src = `data:image/svg+xml;base64,${base64Icon}`;
    img.alt = 'Scroll to Bottom';
    img.style.width = '16px';  // 宽度调整为 16px
    img.style.height = '16px'; // 高度调整为 16px
    img.style.display = 'block'; // 确保图标垂直居中
    button.appendChild(img);

    // Apply styles to the button
    button.style.position = 'fixed';
    button.style.bottom = '14px';
    button.style.right = '14px';
    button.style.zIndex = '2';
    button.style.backgroundColor = 'none'; // 修正为透明背景
    button.style.border = '0.5px solid transparent';                // 修正为无边框
    button.style.borderRadius = '50%';
    button.style.padding = '4px';
    button.style.cursor = 'pointer';
    button.style.display = 'flex';              // 使用 flex 布局
    button.style.alignItems = 'center';         // 垂直居中
    button.style.justifyContent = 'center';     // 水平居中

    // Add click event listener to scroll to the bottom
    button.addEventListener('click', function() {
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
    });

    // Append the button to the body
    document.body.appendChild(button);
})();