213

对于页面内部跳转跳转到指定位置时，我们可以采用js的方式进行scroll移动，但是我们更为方便的是可以采用锚点的方式进行跳转。

锚点的使用方法

1. 通过a标签的href形式设置

   text
   <a href='#a'>锚点a</a>

2. 通过给dom元素增加id的形式，当点击跳转到对应#a时，该dom元素或被移动在视口最上方

   text
   <div id='a'></div>

一般用于购物类网站的楼层跳转和信息类网站的文章目录跳转

锚点跳转是跳转到将对应的添加了锚点元素跳转到浏览器视口的最上方

与其等同的**Element.scrollIntoView()**也能实现此方法

text
      const aaa = document.getElementsByTagName("a")[0];
      const ccc = document.getElementsByTagName("div")[2];
      aaa.onclick = () => {
        ccc.scrollIntoView();
      };

**Element.scrollIntoView()**其内部接受一个参数

• boolean类型参数

  1. true（default）

     表示元素的顶端将和其所在滚动区的可视区域的顶端对齐

  2. false

     表示元素的底端将和其所在滚动区的可视区域的底端对齐

锚点跳转遮挡问题

我们都知道锚点跳转时跳转到元素的视口顶部，如果是顶部有fixed定位遮挡该如何处理呢

• 通常网站会有一个nav，当页面滚动时动态设置定位方式，当滚动到某一高度时nav会固定在页面顶部，就像这样
• 然而我们要调集锚点进行跳转时就会出现这种情况
• 而我们的需求是让它的标题显示出来，像这样

解决方案

1. 我们可以通过js的方式去处理：在点击锚点时取消其默认行为，重写其点击后的动作

   1. 获取到该锚点跳转的hash 2. 获取所有dom元素匹配到id为该hash值的元素 3. 将元素定位在navH px上，navH 即遮挡的nav高度
   2. 上面方法明显繁琐，那有没有简单的方法呢？当然有
   3. 通过给滚动的元素设置scroll-padding-top的方式，其他方向同理

   text
   <style>
       html{
           scroll-padding-top:60px
       }
   </style>

   1. 当给滚动元素设置了scroll-paddingtop时，点击锚点时会从滚动端口的顶部边缘向内偏移，值作为有效长度或百分比。
   2. 当你设置值为60px时，点击锚点会向内容不偏移60px，像这样：

能用css实现就不用js实现，end