Javascript 单击时将动态生成的内容移动到页面顶部。Vue.js

在左列中获取以下动态生成的内容：

<div v-for="index in total" :key="index">
    <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2>
</div>

动态内容：

以及位于页面右上角固定位置的按钮：

<div style="position: fixed; top: 1em; right: 1em;">
    <button v-on:click="autoScrollToDivAtCurrentIndex"></button>
</div>

我想按钮移动到页面顶部的下一个div

请澄清。第一个代码块在左侧的列中生成n个div。第二个div在右列顶部的固定位置包含一个按钮。我想点击按钮将左列中的“下一个”div移动到页面顶部

---

我使用的是vue.js。

我认为您可以从以下解决方案中获得启发，以实现您的目标，在这种情况下，我们应该移动内容而不是

div

元素，因为如果我们要移动div元素，则需要CSS代码和一些逻辑来处理它

newvue({
el:“#应用程序”，
数据：{
总数：[1,2,3,4,5,6]，
下一个：1
},
方法：{
autoScrollToDivAtCurrentIndex（）{
if（this.next==this.total.length）{
this.next=1；
this.total=[1,2,3,4,5,6]
}否则{
这个.next++；
此.total.splice（此.next-1，1）；
this.total.unshift（this.next）；
}
}
}
})

JS-Bin
动态内容：
移动

我通过给div一个唯一的动态id解决了这个问题：

<div v-for="index in total" :key="index" :id="'id_' + index">
    <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2>
</div>

按钮本身无需更改：

<div> style="position: fixed; top: 1em; right: 1em;">
    <button v-on:click="autoScrollToDivAtCurrentIndex"></button>
</div>

<div> style="position: fixed; top: 1em; right: 1em;">
    <button v-on:click="autoScrollToDivAtCurrentIndex"></button>
</div>

autoScrollToDivAtCurrentIndex(){
    let ele = document.getElementById('id_' + this.nextElement);
    window.scrollTo(ele.offsetLeft,ele.offsetTop);
    this.nextElement++;
}