vue 两步实现点击导航栏，滚动页面到指定位置的功能

目录

• 实现效果
• 具体实现步骤
• • step1：获取不同板块的滚轮高度
  • step2：编写执行滚动操作的函数

    实现效果

    

    
    （图片来源网络，侵删）

    具体实现步骤

    step1：获取不同板块的滚轮高度

    当编写好html部分后，我们创建一个可以获取当前滚轮位置的方法handleScroll()，并在mounted钩子函数中添加该方法的监听事件

    methods: {
      handleScroll() {
          var scrollTop = document.documentElement.scrollTop;
          this.scrollHeight = scrollTop;
          console.log('当前滚轮高度:',this.scrollHeight); // 使用后记得注释掉哦
      },
    },
    mounted(){
       window.addEventListener("scroll", this.handleScroll);
    }
    

    创建好监听事件后，我们手动滑动网页右侧滚动条到各版块位置，并打印当前板块的滚轮高度

     // 获取到到的各版块滚轮高度
     // area1 scrollHeight == 208.3813934326172
     // area2 scrollHeight == 960.2766723632812
     // area3 scrollHeight == 1637.001708984375
     // area4 scrollHeight == 2305.38330078125
    

    step2：编写执行滚动操作的函数

    1、具体思路

      ① 获取到当前滚轮位置后，计算其位置与目标区域位置的高度差 x

      ② 进行 n 次循环，不断减去设定的最小移动单位 dx ，来缩减它们之间的高度差，直至为 0

      ③ 但需要注意的是：因不同位置获取到滚轮的高度不固定，所以 n -1 次减去最小移动单位 dx 后，高度差不一定为零，即 0

    
    （图片来源网络，侵删）

    2、实现方法

      通过定时器进行 n 次循环，高度差不断减去最小移动距离至 0，同时控制滚动条不断靠近目标位置（即向目标位置加/减单位距离）

    这里先定义好需要使用的变量

    data(){
    	return {
    	  scrollHeight:0, //当前滚轮高度
          metaHeight:15,  //最小滚动距离
          metaTime: 10,   //最小执行时间
          targetHeight:0,     //目标区域滚轮高度
    	}
    }
    

    编写滚动方法

     toArea(index) { // 这里的index是左侧导航栏传的参数，是不同区域设定好的索引值
          switch (index) { // 匹配不同区域的滚轮高度
            case 1: //区域一
              this.targetHeight= 208  //这里将第一步获取到的滚轮高度取整
              break;
            case 2: //区域二
              this.targetHeight= 960
              break;
            case 3: //区域三
              this.targetHeight= 1637
              break;
            case 4: //区域四
              this.targetHeight= 2305
              break;
            default: //默认：区域一
              this.targetHeight= 208
              break;
          }
          // 判断执行情况
          // 当指定区域和当前滚动条位置一致时
          if( (document.documentElement.scrollTop===208&&this.targetHeight === 208)||
              (document.documentElement.scrollTop===960&&this.targetHeight === 960)||
              (document.documentElement.scrollTop===1637&&this.targetHeight === 1637))
          {
            console.log('已经到达该区域了哦')
          }
          // 当指定区域高度大于当前滚动条位置时（即目标区在当前滚轮的下方）
          else if(this.targetHeight> this.scrollHeight){
            // 计算高度差
            let x = this.targetHeight- this.scrollHeight;
            // 先加上余数，保证高度差能整除设定的最小移动单位
            document.documentElement.scrollTop += x%this.metaHeight;
            x -= x%this.metaHeight;
            const goto = setInterval(() => { // 建立执行操作的定时器
              document.documentElement.scrollTop  += this.metaHeight; // 控制移动滚动条
              x-= this.metaHeight; // 缩减高度差
              if (x == 0) { // 到达指定位置后清除定时器
                clearInterval(goto); //清除定时器
              }
            }, this.metaTime);
          }
          // 当指定区域高度小于当前滚动条位置时（即目标区在当前滚轮的上方）
          else{
            // 计算高度差
            let x = this.scrollHeight - this.targetHeight;
            // 先减去余数，保证高度差能整除设定的最小移动单位
            document.documentElement.scrollTop -= x%this.metaHeight;
            x -= x%this.metaHeight;
            const goto = setInterval(() => {
              document.documentElement.scrollTop -= this.metaHeight;
              x-= this.metaHeight;
              if (x == 0) {
                clearInterval(goto); //清除定时器
              }
            }, 1);
          }
        },
    

    为导航栏添加点击事件 @click

    
        
    
            {{ item.title }}
        
    
    

    data(){
    return {
    	 navBarList:
    	 [{
              id:"lnb1",
              title:"教育",
              index:1
            },
            {
              id:"lnb2",
              title:"历史",
              index:2
            },
            {
              id:"lnb3",
              title:"风景",
              index:3
            },
            {
              id:"lnb4",
              title:"文创",
              index:4
            }],
    }
    

    OK到这里就实现了在页面不同位置点击左侧导航栏，滚动页面到对应板块（指定位置），并可以自定义滚动操作的速度和距离。各位朋友觉得有帮助到您的话，劳烦点个赞赞鼓励一下吧，嘻嘻。

    
    （图片来源网络，侵删）