scrollIntoView+锚点两种方式实现页面的平滑滚动，长页面分页

scrollIntoView

简介

该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

语法

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数

用法

// 点击菜单实现滚动
 handleChildNodeCode (val) {
     const dom = document.getElementById(val[0]);
     if (val[0] && dom) {
         this.$nextTick(() => {
             dom.scrollIntoView({
                 behavior: "smooth",  // 平滑过渡
                 block: "start"  // 上边框与视窗顶部平齐。默认值
             });
         })
     }
 },

页面绑定唯一的id

通过scrollIntoView实现长页面分页

首先获取页面上所有的分页类

比如：我的长页面有几十个一定高度的页面组成，规则就是每个子页面都有一个相同的类：比如full_page

获取所有类名为full_page的dom

mounted () {
     window.onload = () => { // 确保页面中所有的dom都渲染完成
         this.classFullPageList = document.getElementsByClassName('full_page');
         this.totalPageIndex = this.classFullPageList.length;
     }
 },

点击分页

// 上一页
handlePreviousPage () {
    if (this.pageIndex > 0) { // 注意数组的下标是从0开始
        this.pageIndex--;
        this.classFullPageList[this.pageIndex].scrollIntoView({
            behavior: "smooth",  // 平滑过渡
            block: "start"  // 上边框与视窗顶部平齐。默认值
        });
    }
},
// 下一页
handleNextPage () {
    if (this.pageIndex < this.totalPageIndex - 1) {
        this.pageIndex++;
        this.classFullPageList[this.pageIndex].scrollIntoView({
            behavior: "smooth",  // 平滑过渡
            block: "start"  // 上边框与视窗顶部平齐。默认值
        });
    }
}

变量的定义

 totalPageIndex: 0, // 总页数
 pageIndex: 0, // 当前页
 classFullPageList: [], // 页面上所有class为full_page的dom节点

效果

点击即可实现页面级别分页