☰

Scroll to Top Button

Adds a customizable scroll-to-top button near the page bottom.

या स्क्रिप्टच्या अशा आवृत्त्या ज्यांत कोड अपडेट करण्यात आले होते. सर्व आवृत्त्या दाखवा.

  • v3.1.0 2025-04-13

    Changelog: Scroll to Top Button - v2.4.0 vs v3.1.0 (Developer Notes)

    This details the technical modifications and refactoring between the two versions.

    I. Architectural & Core Changes:

    1. CSS Injection vs. Inline Styling:

      • v2.4.0: Applied most base styles and all dynamic :hover/:active styles directly via element.style using JavaScript (createButtonElement, setButtonHoverStyle, resetButtonStyles, setButtonPressStyle). Visibility/Opacity were also directly manipulated in JS (handleScrollEvent) with a setTimeout for the hide transition.
      • v3.1.0: Major Change. Introduces CSS injection via _injS. A <style> tag (#_sid) is added to the <head>. All base styles, :hover, :active pseudo-classes, and visibility transitions (opacity, visibility, transform) are now handled purely via CSS rules targeting the button's ID (#_bid) and a .visible class.
      • Rationale: Reduces JS DOM style manipulation, leverages browser's CSS engine for better performance and rendering, cleaner separation of concerns, simplifies JS logic (removes hover/active handlers and visibility timeout).

    2. Visibility/State Handling:

      • v2.4.0: Used shouldShowButton logic (checking showThreshold and bottomThreshold) and directly set element.style.opacity and element.style.visibility.
      • v3.1.0: Simplified visibility logic (_hSE). Only checks scroll position against _cfg.bh.shThrPx. Toggles a .visible class on the button element. The CSS handles the actual fade/show animation via transitions linked to this class. Removed the bottomThreshold logic.

    3. Configuration Structure (APP_CONFIG vs _cfg):

      • v2.4.0: Used APP_CONFIG with more verbose nested object names (button, behavior, scroll).
      • v3.1.0: Renamed to _cfg with abbreviated nested names (b, bh, sc) and key names (e.g., size -> sz, transitionSpeed -> trMs). Breaking change for users with custom configurations.

    4. Smooth Scroll Implementation (smoothScrollToTop vs _scT/_smS):

      • v2.4.0: Single smoothScrollToTop function. Included logic to adjust scrollDuration based on scroll.breakpoints. Used requestAnimationFrame and selected easing function.
      • v3.1.0: Split into _scT (controller) and _smS (animation loop).
        • _scT: Checks _cfg.bh.smScr. If true, checks _cfg.bh.natSmScr and browser support ('scrollBehavior' in document.documentElement.style) to potentially use native window.scrollTo({ behavior: 'smooth' }). Otherwise, calls _smS. If smScr is false, uses window.scrollTo({ behavior: 'auto' }).
        • _smS: Simplified custom animation loop. Uses performance.now() for timing. Removed the dynamic duration adjustment based on breakpoints. Uses cancelAnimationFrame if a new scroll is initiated before the previous finishes. Easing function selected via _gEF().

    II. Added Features & Options:

    1. Native Smooth Scroll Option (_cfg.bh.natSmScr): New boolean config to prefer browser's native implementation when available and enabled.
    2. Expanded Easing Functions (_eas): Significantly increased the number of available easing functions compared to v2.4.0.
    3. SVG Path Configuration (_cfg.b.svg.pd): Allows direct customization of the SVG icon path data via config.
    4. Accessibility Attributes (_cfg.b.lbl): Added aria-label and title to the button, configured via _cfg.b.lbl.
    5. @noframes Directive: Added to the UserScript header to prevent execution in iframes.
    6. Basic Initialization Error Handling: Wrapped _init body in try...catch block.

    III. Removed Functionality:

    1. Bottom Threshold (behavior.bottomThreshold): The logic to hide the button when near the page bottom was removed.
    2. FPS Configuration (scroll.fps): Removed as requestAnimationFrame handles frame timing natively.
    3. Dynamic Scroll Duration (scroll.breakpoints): Removed complexity; scroll duration is now fixed per scroll action based on _cfg.sc.durMs.
    4. JS-based Hover/Active Styling: Replaced entirely by CSS pseudo-classes.

    IV. Internal & Minor Changes:

    1. Element IDs: Button ID changed from enhanced-scroll-button to estb-dxrk1e-s. Style ID estb-styles-dxrk1e-s added.
    2. Internal Naming Convention: Increased use of underscore prefix (_) for internal functions/variables (e.g., _btn, _sto, _gSP).
    3. Debounce Function (_deb): Simplified implementation compared to v2.4.0's debounce (removed immediate flag logic). Module-scoped timeout variable (_sto).
    4. Scroll Position Getter (_gSP): Uses window.scrollY first, a more modern equivalent to pageYOffset.
    5. MutationObserver Target: Changed from document.documentElement to document.body. Added attributes: false for potentially better performance.
    6. Default Values: Minor adjustments to default styling and behavior timings/thresholds (see code diff for specifics).

    Summary:

    Version 3.1.0 represents a significant refactoring towards using CSS for styling and transitions, simplifying JavaScript logic, and improving performance and maintainability. It introduces native smooth scroll support and more easing options while removing some less essential complexity (like bottom threshold and dynamic scroll speed). The configuration structure change is the main breaking change for end-users modifying the script.
  • v2.4.0 2025-01-29

    Changelog

    2.4.0

    • Enhanced Configuration:
      • Introduced APP_CONFIG for better organization and customization of button styles, behavior, and smooth scrolling.
      • Consolidated position configurations under APP_CONFIG.button.position.
      • Added APP_CONFIG.button.svg to customize the SVG icon's dimensions.
    • Improved Smooth Scrolling:
      • Added a toggle to enable/disable smooth scroll enableSmoothScroll.
      • Implemented adjustable scroll speed based on the distance.
      • Improved animation calculation by using performance.now for better time accuracy, and now uses requestAnimationFrame.
      • Use cubic easing function, with defined easing functions for better control
    • Button Styles & Behavior:
      • Enhanced button hover, press, and reset styles for a smoother visual experience.
      • Added transition on opacity for a fade effect
      • Changed to using document.documentElement as observer
      • Uses updated debouncing for better performance
      • Replaced minimumPageHeight with bottomThreshold for a better way to show the button.
    • Code Refactor:
      • Reorganized code for better readability and maintainability.
      • Introduced EASING_FUNCTIONS for improved organization of easing functions.
      • Improved code consistency and clarity.
  • v2.1.1 2024-11-23
  • v2.1.0 2024-11-18

    Scroll to Top Button - Changelog

    Version 2.1.0

    Added

    • Advanced smooth scrolling system with multiple easing functions
    • Dynamic scroll duration based on scroll distance
    • Configuration options for scroll behavior
    • Breakpoint system for different scroll distances
    • Performance optimized animation using requestAnimationFrame

    Changed

    • Improved button visibility logic
    • Enhanced transition animations
    • Better handling of dynamic content
    • Upgraded SVG icon implementation

    Fixed

    • Issues with lazy-loaded content detection
    • Button visibility during rapid scrolling
    • Z-index conflicts with other fixed elements

    Version 2.0.0

    Added

    • MutationObserver for dynamic content support
    • Debounced scroll event handling
    • Configurable show/hide thresholds
    • Hover and click animations
    • SVG icon replacement for text arrow

    Changed

    • Restructured code organization
    • Improved performance optimizations
    • Enhanced visibility control system
    • Better shadow effects and transitions

    Fixed

    • Multiple button creation issues
    • Scroll position calculation accuracy
    • Button visibility in complex layouts

    Thanks for the user named LeFiXER. I fixed some issues regarding to this userscript.
  • v1.6.1 2024-07-24
  • v1.6 2024-07-24

    Scroll to Top Button Userscript Changelog

    Version 1.6

    Date: 2024-07-24

    Changes:

    • Button Width Adjustment: The width of the "Scroll to Top" button was adjusted to ensure a more circular appearance, as it previously appeared more oval.
  • v1.5 2024-07-24