模态框出现滚动条，点击分页的时候返回顶部

最近用antd 和vue 在做一个关于小说的后台管理系统。有一个关于模态框滚动条，点击分页的时候返回顶部的需求

 

具体思路：当滚动条，下拉到底部的时候，点击上一章，或者下一章，需要将滚动条返回顶部。

注意：设置返回顶部，必须要给滚动区域的包裹层设置 因此，我给div 设置了ref属性

           其实就是两行代码解决：

           let scrollElem = this.$refs.scrollDiv;
           scrollElem.scrollIntoView(true)

上代码

<a-modal title="章节正文" :visible="visible" width="60%" centered :confirmLoading="confirmLoading"
      @cancel="() => { $emit('cancel') }" ref="mianscroll">
    <!-- 滚动区域内容 --> 
      <div ref="scrollDiv">
        <h1>{{ articleList.name }}</h1>
        <hr>
        <div style=" font-size: 20px;" ref="a"></div>
      </div>
      <template slot="footer">
        <a-button type="primary" @click="previousChapter" :disabled="prev">上一章</a-button>
        <a-button type="primary" @click="nextChapter" :disabled="next">下一章</a-button>
      </template>
    </a-modal>

 

    previousChapter() {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollIntoView(true)
    },
    nextChapter() {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollIntoView(true)
    },

有问题欢迎在评论区提出讨论，谢谢！