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:对象的底端与当前窗口的底部对齐) } },
4.锚点跳转后页面上移问题
- 注意！！！这个问题一般情况下是最顶层元素设置了margin或者有高度溢出的原因，如果是margin-top，那么锚点跳转后页面向上移，如果是margin-bottom，那么锚点跳转后页面向下移，此时把最顶层元素的margin去掉或者改为padding即可解决。