Im trying to scroll to a specific element onclick. But I get the following error.

Uncaught TypeError: element.scrollIntoView is not a function

This is my script

<script setup>
import { ref } from 'vue'

function goTo(refName){
    let element = ref(refName);
   element.scrollIntoView({behavior: "smooth"})
}

</script>

This is my click function

<DayWithText v-for="day in daysOfWeek" :name="day.shortHand" :day="day.day" :date="day.date"  @click.prevent="goTo('test')"/>

This is the element

<p ref="test">test</p>

What am I doing wrong?

Im trying to scroll to a specific element onclick. But I get the following error.

Uncaught TypeError: element.scrollIntoView is not a function

This is my script

<script setup>
import { ref } from 'vue'

function goTo(refName){
    let element = ref(refName);
   element.scrollIntoView({behavior: "smooth"})
}

</script>

This is my click function

<DayWithText v-for="day in daysOfWeek" :name="day.shortHand" :day="day.day" :date="day.date"  @click.prevent="goTo('test')"/>

This is the element

<p ref="test">test</p>

What am I doing wrong?

• javascript
• vue.js
• vuejs3
• vue-position-api
• js-scrollintoview

• 1 I could make it work, working with ID instead of refs – Lx45 Commented Jul 9, 2022 at 9:42
• It's a mistake to call ref inside goTo, it physically can't work this way and should stay at top level. Check Check vuejs/guide/essentials/template-refs.html#refs-inside-v-for . It's unclear how these snippets are related, please, provide stackoverflow./help/mcve – Estus Flask Commented Jul 9, 2022 at 10:02

4 Answers 4

ref('test') does not return <p ref="test">test</p>. It creates a new ref with initial value of 'test' (string).

To get that paragraph, you have to declare it as

const test = ref(null)

inside <script setup> (before mount).

At any time after the ponent mounted

test.value?.scrollIntoView({behavior: "smooth"})

will work.

Demo:

const { createApp, ref } = Vue;

createApp({
  setup() {
    const test = ref(null);
    const goToTest = () => {
      test.value?.scrollIntoView({behavior: "smooth", block: "center"})
    }
    return {
      test,
      goToTest
    }
  }
}).mount('#app')

#app p {
  margin: 200vh 0;
}

<script src="https://unpkg./[email protected]/dist/vue.global.prod.js"></script>
<div id="app">
  <button @click="goToTest">Go to test</button>
  <p ref="test">test</p>
</div>

Under the hood, on mount, when the <template> parser finds a ref, it looks into setup scope for the declared variable with that name. If found and if it's a ref, the current DOM element is placed in that ref's value.

In my case

const refName = ref(null);

const goTo = () => {
    refName.value.$el.scrollIntoView({behavior: "smooth"});
}

html

<div @click="goTo()">scroll to</div>
<p id="refName">Scrolled position</p>

worked for me

I solved it as follows.

<script lang="ts" setup>
const scrollToElem = ()=> {
    document.getElementById("pagetop")?.scrollIntoView({behavior: "smooth"});
}
</script>
<template>
<div>
   <div id="pagetop" class="content">
      Bla bla bla...
   </div>
</div>
</template>

For typescript it is:

    const test= ref<null | HTMLDivElement>(null);

    test.value?.scrollIntoView({behavior: "smooth"})