javascript - 如何在 Vue 中以编程方式滚动页面？

Question

一个菜鸟问题：

当页面完全加载时，我试图跳转到页面底部。我该怎么做呢？

这是我未能在 Vue 中实现的纯 js 代码：

let bottomLoad () => {
    window.scrollTo(0,document.body.scrollHeight);
}

window.eventListener("load", bottomLoad)

Answer 1

在 vue 中，mounted 函数在页面或组件完全加载时被调用。所以你可以试试下面的那个功能......

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
 el: '#app',
 mounted: function() {
    window.scrollTo({ top:document.body.scrollHeight, behavior: 'smooth'});
 }
})

#scrooll {
  height: 1900px;
  border: 1px solid red;
}

#scrooll h1 {
position:absolute;
top: 1800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="scrooll">
  <h1>Hey I shoud be at bottom</h1>
</div>
</div>