HTML页面锚点跳转的两种方法总结以及锚点跳转后页面上移问题

1.业务需求：

• vue项目，所在项目有一个文档树形数据，前端请求到文档数据后需要动态渲染，此时当文档过长时就需要通过目录进行锚点定位，以方便用户查看。

2.需求分析

• 锚点定位的方法常用的有两种，这两种各有优缺点。第一种是a标签方案，它的优点是写法更简便，缺点是这种方法会改变url地址，因此锚点跳转后刷新页面会找不到当前的页面。第二种方法是scrollIntoView()方案，它的优点是跳转不会改变url地址，缺点是可能需要进行节点操作。

2.解决方案-a标签：

• a标签方案只需要编写HTML文件即可，这里的tableData是一个包含id、index、title、content的数组，在对数组进行遍历时动态去渲染，左侧目录的HTML写法如下：

•   <div style="padding: 3px 1em" v-for="(item,index) in tableData" :key="index">
                    <a :href="'#'+item.id" class="topA" v-if="item.index==1">{{item.title}}</a>
                    <a :href="'#'+item.id" class="secA" v-else-if="item.index==2">{{item.title}}</a>
                    <a :href="'#'+item.id" class="thiA" v-else>{{item.title}}</a>
                  </div>
  

• 右侧内容的HTML写法如下：

•   <div style="padding: 10px 1em 0" v-for="(item,index) in tableData" :key="index">
                <h3 :id="item.id" class="topTitle" v-if="item.index==1">{{item.title}}</h3>
                <h4 :id="item.id" class="secTitle" v-else-if="item.index==2">{{item.title}}</h4>
                <h5 :id="item.id" class="thiTitle" v-else>{{item.title}}</h5>
                <p v-if="item.index==1" class="contentS">{{item.content}}</p>
                <p v-else-if="item.index==2" class="contentS secTitle">{{item.content}}</p>
                <p v-else class="contentS thiTitle">{{item.content}}</p>
              </div>
  

3.解决方案-scrollIntoView()：

• scrollIntoView()方案中，右侧内容的HTML写法与a标签方案的写法一致，左侧HTML写法如下：

• <div style="padding: 3px 1em" v-for="(item,index) in tableData" :key="index">
                  <p @click="herfTo(item.id)" class="topA" v-if="item.index==1">{{item.title}}</p>
                  <p @click="herfTo(item.id)" class="secA" v-else-if="item.index==2">{{item.title}}</p>
                  <p @click="herfTo(item.id)" class="thiA" v-else>{{item.title}}</p>
                </div>
  

• 其中左侧目录的点击方法写法如下：

• herfTo(id) {
          const returnEle = document.querySelector("#"+id); // 获取跳转去的节点
          if (!!returnEle) {
            returnEle.scrollIntoView(true); // 让当前的元素滚动到浏览器窗口的可视区域内(true:对象的顶端与当前窗口的顶部对齐,false:对象的底端与当前窗口的底部对齐)
          }
        },
  

5.锚点跳转后页面上移问题

• 注意！！！这个问题一般情况下是最顶层元素设置了margin的原因，如果是margin-top，那么锚点跳转后页面向上移，如果是margin-bottom，那么锚点跳转后页面向下移，此时把最顶层元素的margin去掉或者改为padding即可解决。