More Premium Hugo Themes Premium Vue Themes

Vue Backtotop

A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop

A Back-to-top component for Vue.js, which scroll page to the top when clicked

Author Avatar Theme by caiofsouza
Github Stars Github Stars: 182
Last Commit Last Commit: Nov 27, 2018 -
First Commit Created: Aug 8, 2025 -
Vue Backtotop screenshot

Overview

The Vue Backtotop Component is an essential tool for any Vue.js application, allowing users to effortlessly scroll back to the top of the page with a single click. This feature enhances user experience by providing an accessible way to navigate long pages, making it especially useful for content-heavy sites. The component is easy to integrate via npm and is highly customizable, catering to a variety of design needs and user preferences.

With its straightforward design and functionality, the Vue Backtotop Component is not only user-friendly but also developer-friendly. Whether you’re looking for a simple solution to improve navigation or seeking to implement more advanced user interactions, this component serves as an excellent foundation.

Features

  • Customizable Text: The button displays the text “Voltar ao topo” by default, but you can easily change it to any string by using the text property.
  • Visibility Offset: You can specify when the component should become visible by adjusting the visibleoffset property, which determines the scroll threshold.
  • Bottom and Right Positioning: Control the positioning of the button on the screen with the bottom and right properties, allowing for tailored placement within your app.
  • Custom Scroll Function: Implement custom functions during the scroll event with the scrollFn property, enabling personalized actions based on your scroll behavior.
  • Event Handling: The component emits a scrolled event when scrolling ends, providing an opportunity to trigger additional functionality or analytics.
  • Flexible Component Integration: Not only is it a standalone button, but you can also encapsulate your own HTML or Vue components within the Backtotop, enhancing versatility.
  • Easy Installation: Simply install via npm and import it into your project for quick setup and integration, saving development time.