Goto Top Animation.

Scroll page for Action.

The GotoTop button in Canvas is a fully configurable scroll-to-top control that animates smoothly as users navigate long pages. Built with pure CSS variables, it adapts effortlessly to any color scheme or layout without touching a single line of JavaScript. This makes it an ideal starting point for developers building responsive, scroll-heavy landing pages.

The animated SVG ring surrounding the GotoTop icon gives users a visual cue of how far they have scrolled through the page content. As the user scrolls downward, the stroke dashoffset decrements proportionally, creating a smooth circular progress effect. This feature transforms a simple navigation element into a polished, interactive experience that reinforces page depth and engagement.

All visual aspects of the GotoTop component are governed by CSS custom properties, making theme-level overrides straightforward and conflict-free. Developers can change the stroke color, stroke width, and scroll distance threshold without altering the core stylesheet. This architecture keeps customizations isolated, maintainable, and easy to transfer across Canvas projects.

Canvas integrates the Bootstrap Icons library to power the GotoTop arrow icon, giving designers access to a broad set of high-quality vector symbols with no additional dependencies. The icon is injected through a CSS pseudo-element, keeping markup clean and reducing DOM complexity. Switching icons is as simple as updating a single content value in your custom stylesheet override.

The GotoTop button supports a dedicated mobile display mode, toggled via the data-mobile attribute, so it appears only when and where it adds genuine navigational value. On smaller screens, the button reflows seamlessly into the layout without overlapping critical interface elements. This thoughtful responsiveness ensures a consistent and unobtrusive experience across every breakpoint and device.

A configurable offset threshold determines at what scroll depth the GotoTop button appears, giving content authors precise control over its visibility timing. This prevents the button from displaying immediately at the top of the page, where it would serve no purpose. Setting the offset through a data attribute keeps the logic declarative and easy to adjust per page.

Canvas is built around a modular component system that lets developers assemble complex page layouts from a library of reusable blocks, each independently styled and scripted. This composable approach dramatically reduces development time and ensures visual consistency across multi-page projects.

The GotoTop scroll listener is bound to the window load event, ensuring it initializes only after all DOM elements are fully ready and layout calculations are accurate. The listener updates the CSS custom property on every scroll tick, delivering frame-accurate progress tracking with minimal overhead. This pattern is a reliable baseline for adding scroll-driven animations throughout any Canvas-based project.

Canvas ships its component logic as a consolidated JavaScript bundle, combining utility functions and plugin initializations into a single optimized file. This reduces HTTP requests and simplifies dependency management for production deployments. The GotoTop initialization code plugs directly into this bundle's event pipeline, benefiting from the same load-order guarantees as every other Canvas component.

The GotoTop SVG ring and icon layer are carefully stacked using z-index to maintain crisp visual separation from page content as the user scrolls. The SVG sits above the background border while the pseudo-element icon remains centered and fully clickable at all times. This layering strategy prevents rendering artifacts and ensures accessibility with keyboard and touch navigation.

The SVG circle uses a dasharray of 255 units matched to the circle's circumference, ensuring the progress animation spans exactly one full revolution from empty to complete. The offset calculation in JavaScript maps scroll percentage to the dashoffset range, producing linear, predictable fill behavior. This mathematical approach guarantees visual accuracy regardless of page height.

Canvas exposes a global theme color variable that the GotoTop stroke inherits by default, so changing your brand palette automatically updates the scroll indicator with no additional configuration. This single-source-of-truth model keeps your design system coherent across all interactive elements. Overriding the stroke color locally is straightforward for pages that require a distinct visual treatment.

The GotoTop button is positioned as a fixed element and remains reachable via keyboard focus, supporting users who navigate without a mouse. Its transparent background and icon-based design keep it visually unobtrusive while remaining a clearly distinguishable interactive control. Adding an aria-label attribute is recommended for screen reader users in production deployments.

When deploying a Canvas project, the GotoTop component requires no separate build steps beyond including the standard plugins bundle and stylesheet. It is ready to use out of the box on any page that includes the core Canvas assets, making it one of the easiest enhancements to add to an existing layout.