Simple And Lightweight “back to top” Vue.js Component

Vue.js is a simple and lightweight component that scrolls up smoothly when clicked. It can also be used to update the data to load the latest content using the scrolledOnTop event.

Inspired by Instagram, Linkedin, Reddit, etc., scroll to the refresh button.

Must Read: Back to Top Button Using Vanilla Javascript | back2top.js

How to make use of it:

Install and download:

npm i vue-simple-scroll-up --save

1. Import for global use.

import Vue  from 'vue'
import scrollUp  from 'vue-simple-scroll-up'

Vue.use(scrollUp)
...

2. or on a single component.

import scrollUp from 'vue-simple-scroll-up'
...
},
components: {
  'vue-scroll-to-top': scrollUp
}
...

3. Add this to your files:

<vue-scroll-to-top text="Back to top" :visibleY="1200" :duration="1000"></vue-scroll-to-top>

4. To run the scrolledOnTop event:

<vue-scroll-to-top text="Back to top" @scrolledOnTop="yourReloadFunction()"></vue-scroll-to-top>

5. Replace CSS property to change button style:

.vue-scroll-button{
  background-color: #4CAF50; /* button background color */
  color: white; /* button text color */
}
.vue-scroll-button:hover{
  box-shadow: 0 12px 14px -6px #4CAF50; /* button shadow */
}

Props

Must Read: A Smooth Scrolling Back To Top Button on Native JavaScript | up-button

PropertyTypeDefault ValueDescription
textString‘Back to top’Button description.
visibleYNumber400Show button when scrollY equals visibleY value.
durationNumber800Scrolling animation duration.

Events

Must Read: [TypeWatch] jQuery Plugin to Determine When a User Stops Typing in a Text Field

NameDescription
scrolledOnTopTriggered when scrolling finished (can be used to refresh content)

See Also –

Fixed Table Header To The Top Of Page On Scroll in Pure Javascript
Hide On Scroll Fixed Top Navigation In Pure JavaScript (no jQuery)
JavaScript Library To Create Sticky Header & Footer On Scroll | titleBarJs


See Demo And Download

Official Website(asdf1899): Click Here

This superior jQuery/javascript plugin is developed by asdf1899. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API….