↑ Back to Top
A lightweight, accessible, and customizable component that helps users quickly return to the top of long dashboards, reports, and documentation pages within the Env platform.
Quarterly Sustainability Report Q3 2025
Env's back-to-top component is optimized for high-density data interfaces, ESG reporting dashboards, and multi-page documentation sets. It automatically detects scroll position and appears with a smooth, non-intrusive animation.
Carbon Emission Breakdown
- Scope 1: Direct emissions from owned facilities (↓ 12% YoY)
- Scope 2: Indirect emissions from purchased energy (↓ 8% YoY)
- Scope 3: Value chain emissions (↑ 3% due to expanded logistics)
Renewable Energy Transition
Our grid-mix optimization algorithms have successfully shifted 68% of data center load to wind and solar sources across APAC and EMEA regions. The back-to-top utility ensures analysts can navigate these detailed breakdowns without losing context.
Water Usage & Circular Systems
Advanced closed-loop water recycling now processes 4.2M liters daily across manufacturing sites. Real-time telemetry feeds into the Env dashboard, where vertical navigation aids maintain workflow continuity.
Supply Chain Transparency
Vendor compliance scoring has improved by 22% following the rollout of automated audit trails. Documentation pages utilize the back-to-top component to reduce click fatigue during lengthy review cycles.
Executive Summary & Targets
By 2030, Env commits to net-zero operational emissions. This component is part of our broader UX standardization effort to improve accessibility and reduce cognitive load across all sustainability reporting tools.
← Scroll back up to test the button →
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
threshold | number | 300 | Scroll distance (px) before button appears |
animation | string | "fade-slide" | Transition style: "none", "fade", "slide" |
position | string | "bottom-right" | Placement: "bottom-left", "bottom-right", "fixed" |
ariaLabel | string | "Back to top" | Screen reader label for accessibility |
behavior | string | "smooth" | Scroll behavior: "auto" or "smooth" |
Implementation
Accessibility & UX Guidelines
Keyboard Navigation
Fully focusable via Tab. Activates with Enter or Space. Respects natural tab order and does not trap focus.
Screen Reader Support
Uses role="button" and dynamic aria-label. Announces state changes when appearing/disappearing.
Reduced Motion
Automatically disables transitions and smooth scrolling when prefers-reduced-motion: reduce is detected.
Visual Hierarchy
Designed to appear only after meaningful scroll. High contrast ratio (4.8:1) ensures visibility on all background densities.