DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for After refresh scroll page to Top/Middle/Footer.
Vickyvn
Vickyvn

Posted on

After refresh scroll page to Top/Middle/Footer.

Here we learn how can we scroll our page onclick button or after Reload page.

simple we adding ref in our html tags where you want to scroll page.
example

< div class="top" ref="goToTop"> ... < /div >
or
< div class="middle" ref="goToMiddle"> ... < /div >
or
< div class="footer" ref="goToFooter"> ... < /div >
Enter fullscreen mode Exit fullscreen mode

in vue js we handled

// Create method
scrollToElement(ref) {
    window.scrollTo(0,0);
    this.$scrollTo(ref, 1000);
},

// If want to after refresh then create mounted()

mounted() {
     this.scrollToElement(this.$refs.goToTop);
}, 
// for top use goToTop , for middle use goToMiddle , for footer use 

// If want to after onclick then create method
onclickMethod() {
     this.scrollToElement(this.$refs.goToTop); 
}, 
Enter fullscreen mode Exit fullscreen mode

I hope it will help you.

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: