Vue method scroll div to top

If you want to scroll with animated way;

• Add scrollTo with an object parameter
• Check your ref element ( in my case $refs[refName][0] )
• If you need to use scroll one more place, add into global scope. (Vue.prototype.$toScroll) then use ( $toScroll() )

Here is the basic usage.

<a @click="toScroll('aKeyValue',0)"></a>

<div  :ref="'aKeyValue'"  class="scrollable">...</div>

This is the method, you can use everywhere.

toScroll(refName,position){
   this.messages.unshift(message);
   this.$nextTick(() => {
       this.$refs[refName][0].scrollTo({ top: position, behavior: 'smooth' });
   });
}

This is old, but for someone who want to find solution like me:

addMessage(message) {
    this.messages.unshift(message);
    this.$nextTick(() => {
        // block: 'end' will scroll to top of element instead of bottom
        this.$refs.toolbarChat.$el.scrollIntoView({ block: 'end', scrollBehavior: 'smooth' });
    });

    axios.post(chat_send_route, message)
    .then(response => {
        console.log(response.data);
    });

}

Here is my solution :

One global div in main container

<div id="topDiv"></div>

One global function put in the Vue prototype :

Vue.prototype.$scrollTop = function () {
  var element = document.getElementById("topDiv");
  var top = element.offsetTop;
  window.scrollTo(0, top);
}

The same anchor everywhere :

<a @click="$scrollTop">Go to the top</a>

This is happening due to way vue updates the dom asynchronously. See Reacivity in depth(Async update Queue)

• To reflect changes immediately use vm.$nextTick(callback)

• instead of querying the dom element using document.getElementById() I recommend add a ref attribute to your toolbar-chat element and reference it in your method using this.$refs. See docs for more on ref attribute

    <div id="toolbar-chat" ref="toolbarChat"></div>
  

So you method should be

methods: {
    addMessage(message) {
        this.messages.unshift(message);
        this.$nextTick(() => {
            this.$refs.toolbarChat.scrollTop = 0;
        });

        axios.post(chat_send_route, message)
        .then(response => {
            console.log(response.data);
        });

    }
}

Here is the working fiddle