Adding a Scroll to top feature in Vue

This content originally appeared on CodeSource.io and was authored by Prince Chukwudire

In this article, you will learn how to add a scroll to top feature in Vue router.

To achieve this we would need to create a method :

  methods:{
      moveUp(){
           window.scrollTo(0,0);
      }
  }

and then add it to our router link:

  <div>
    <router-link to @click="moveUp"></router-link>
  </div>

We can also achieve this by adding the following method to our router file, directly under the routes array.

 scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }

The post Adding a Scroll to top feature in Vue appeared first on CodeSource.io.

This content originally appeared on CodeSource.io and was authored by Prince Chukwudire

Print Share Comment Cite Upload Translate Updates

APA

Prince Chukwudire | Sciencx (2021-03-03T16:51:16+00:00) Adding a Scroll to top feature in Vue. Retrieved from https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/

MLA

" » Adding a Scroll to top feature in Vue." Prince Chukwudire | Sciencx - Wednesday March 3, 2021, https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/

HARVARD

Prince Chukwudire | Sciencx Wednesday March 3, 2021 » Adding a Scroll to top feature in Vue., viewed ,<https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/>

VANCOUVER

Prince Chukwudire | Sciencx - » Adding a Scroll to top feature in Vue. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/

CHICAGO

" » Adding a Scroll to top feature in Vue." Prince Chukwudire | Sciencx - Accessed . https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/

IEEE

" » Adding a Scroll to top feature in Vue." Prince Chukwudire | Sciencx [Online]. Available: https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/. [Accessed: ]

rf:citation

» Adding a Scroll to top feature in Vue | Prince Chukwudire | Sciencx | https://www.scien.cx/2021/03/03/adding-a-scroll-to-top-feature-in-vue/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Articles

Related Posts