Scroll page to div onload on vue js

Question

I am facing problem scrolling page to a div on page load using vue js.

<div v-for="(answer, index) in answers">
    <p>{{answer.id}}</p> <p>{{answer.body}}</p>
</div>

how can i scroll page onload to answer having certain id?

tony19 · Accepted Answer · 2022-07-16 01:59:30Z

1

Try to add a ref to each div like :

<div v-for="(answer, index) in answers" :ref="answer.id">
    <p>{{answer.id}}</p> <p>{{answer.body}}</p>
</div>

and in mounted hook add the following code :

mounted(){
 this.$refs["4"].scrollIntoView({behavior: "smooth", block: "start", inline: "start"});
  //replace 4 by your preferred id

}

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 29, 2020 at 10:27

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1