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.

Latest comments (0)