Vue method scroll div to top

Question

I am learning vue. I have the following method where I add a chat message to a div with id=\"toolbar-chat\". This div allows scrolling on y axis an

Answer 1

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' });
   });
}

Answer 2

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>

Answer 3

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);
    });

}

Answer 4

I used this to make it work:

document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

Answer 5

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