There are various ways to scroll to a bottom of a div with Vue.js In this article, we’ll look at how to scroll to the bottom of a div with Vue.js We can set the scrollTop property of a DOM element to its scrollHeight so that scroll it to the bottom.
If a page has a long list, then it is convenient for users if the page has an element that scrolls to somewhere on the page with one click. In plain JavaScript, there is the window.scrollTo and element.scrollTo functions which take the x, y coordinate of the screen as parameters, which isn’t too practical for most cases. There’s also the scrollIntoView function available for DOM element objects. You…
To start my weekend i have decided code a customizable scroll top component, component will be implemented with vue slots. Slots will allow us to passing any kind of html element to the component.
Component implementation
We will bind to scroll event and check Y axis scroll, this will allow us to hide/show compoment depending on the scroll of the page.
Next, we will make a function that scroll to top of the page step by step and make an simple animation.
Scroll top component
export default { data [] { return { visible: false } }, methods: { scrollTop: function [] { this.intervalId = setInterval[[] => { if [window.pageYOffset === 0] { clearInterval[this.intervalId] } window.scroll[0, window.pageYOffset - 50] }, 20] }, scrollListener: function [e] { this.visible = window.scrollY > 150 } }, mounted: function [] { window.addEventListener['scroll', this.scrollListener] }, beforeDestroy: function [] { window.removeEventListener['scroll', this.scrollListener] } } .bottom-right { position: fixed; bottom: 20px; right: 20px; cursor: pointer; }
Scroll top arrow
Now, with a generic component we will implement a new one: we will use font awesome icon and a simple css styles.
import ScrollTopComponent from './ScrollTopComponent' export default { components: { ScrollTopComponent } } .btn { border-radius: 8px; background-color: rgba[0, 0, 0, 0.55]; padding-top: 27px; padding-left: 10px; padding-right: 10px; padding-bottom: 5px; }
Use
The component using is quite simple, we only need to place component on the DOM.
A super long component