☰

Scroll to Top Button

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

当前为 2025-01-29 提交的版本，查看 最新版本。

作者
DXRK1E
评分
0 0 0
版本
2.4.0
创建于
2024-07-24
更新于
2025-01-29
大小
8.3 KB
许可证
MIT
适用于
所有网站

Scroll to Top Button - Documentation

Overview

This script adds a customizable "scroll to top" button to web pages, making it easy for users to quickly navigate back to the top of long content. It's designed to be user-friendly, performance-focused, and highly configurable.

Key Features

  • Smooth Scrolling: Uses advanced easing functions for natural, visually appealing transitions when scrolling to the top.
  • Intelligent Visibility: The button appears only after scrolling a configurable distance, and fades smoothly in and out.
  • Dynamic Adaptation: Reacts to changes in page content and adjusts button visibility and behavior accordingly.
  • Performance Optimized: Uses debouncing, passive event listeners, and efficient DOM manipulation to avoid impacting page performance.
  • Customizable Appearance: Allows extensive customization of button size, colors, placement, and more.
  • Configuration Flexibility: Offers detailed settings for scroll behavior and visibility thresholds.

How It Works

  1. Button Creation: The script adds a floating button at the bottom of the webpage with an up arrow icon.
  2. Visibility Control: The button is hidden until the user scrolls past a certain point on the page. It fades into view for a smooth transition.
  3. Smooth Scrolling: When clicked, the button scrolls the user back to the top of the page with a smooth animation.
  4. Dynamic Content Handling: Monitors the page for changes to ensure the button visibility is correctly managed.

Configuration Options

The script uses APP_CONFIG to control its behavior. Here's a detailed breakdown:

Button Appearance

button: {
    size: '45px',           // Size of the button
    fontSize: '18px',       // Size of the icon
    backgroundColor: '#3a3a3a', // Background color
    hoverColor: '#555',      // Background color on hover
    textColor: '#f5f5f5',    // Text/icon color
    borderRadius: '55%',    // Button corner radius
    position: {            // Button's position
        bottom: '25px',     // Distance from bottom
        right: '25px'      // Distance from right
    },
    shadow: '0 3px 10px rgba(0,0,0,0.45)', // CSS box shadow
    transitionSpeed: 350,    // Fade in/out speed in ms
    zIndex: 2147483647,     // Button's z-index (ensures it's on top)
    svg: {                 // SVG icon settings
       width: '20px',
       height: '20px',
       viewBox: '0 0 16 16'
    }
}

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址