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
- Button Creation: The script adds a floating button at the bottom of the webpage with an up arrow icon.
- 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.
- Smooth Scrolling: When clicked, the button scrolls the user back to the top of the page with a smooth animation.
- 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'
}
}
