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

痛定思痛。 2022-10-27 13:47 225阅读 0赞

## 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 ####

![在这里插入图片描述][20210204150509559.png]

## 通过scrollIntoView实现长页面分页 ##

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

比如：我的长页面有几十个一定高度的页面组成，规则就是每个子页面都有一个相同的类：比如full\_page  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 获取所有类名为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节点

#### 效果 ####

点击即可实现页面级别分页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

[20210204150509559.png]: /images/20221024/09ed7c1d1f5e4a439c5f08881bd1601b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221024/acb438b5a1e84a01a9a7a56faf3bc32e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20221024/6d07bb330f6b4b79af4a740f406b1ca9.png