How do I scroll to the bottom of the page?

scroll(){
    let container = this.$el.querySelector('#scrollingChat')
    container.scrollTop = container.scrollHeight
}

I'm doing this, and always calling my api answers, but it does not go to the bottom of the page

How do I scroll to the bottom of the page?

scroll(){
    let container = this.$el.querySelector('#scrollingChat')
    container.scrollTop = container.scrollHeight
}

I'm doing this, and always calling my api answers, but it does not go to the bottom of the page

• javascript
• vue.js

4 Answers 4

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

This is will instantly scroll to the bottom of any page.

If you create an anchor in your page like so:

<div id="top"></div>

you can use:

let elmnt = document.getElementById('top');
elmnt.scrollIntoView(false);

This page explains what the different alignment parameters do for scrollIntoView:

true - scrolls to top of element

false - scrolls to bottom of element

default it true

https://www.w3schools.com/jsref/met_element_scrollintoview.asp

window.scrollTo(0,document.body.scrollHeight);

or you can use smooth scroll: https://github.com/alamcordeiro/vue-smooth-scroll

You may take a look at Mozilla Docs as reference.

Code wise safest use with VueJS is, using nextTick() and ref attribution, especially if execution is triggered following an event (Example: Button Click). + works best if you use some VueJS framework.

Scroll can be applied with smooth behavior for a nicer UX.

Example for specific div

<template><div ref="myScrollTarget">...</div></template>
<script>
...
methods: {
  scrollToBottom() {
    const targetRef = this.$refs.myScrollTarget;
    this.$nextTick(() => {
      targetRef.scrollTo(
        {
          top: targetRef.scrollHeight,
          left: 0,
          behavior: "smooth"
        }
      );
    });
  }
}
...
</script>

Example for full page (window)

<template><div>...</div></template>
<script>
...
methods: {
  scrollToBottom() {
    this.$nextTick(() => {
      window.scrollTo(
        {
          top: document.body.scrollHeight,
          left: 0,
          behavior: "smooth"
        }
      );
    });
  }
}
...
</script>