1、通过a标签实现锚点，将a标签的href属性取值为所要链接到的块的id选择器

缺点：它会改变url

<div>
    <div>
            <a href="#lightblue">lightblue</a>
            <a href="#lightgreen">lightgreen</a>
            <a href="#lightpink">lightpink</a>
            <a href="#lightsalmon">lightsalmon</a>
    </div>
    <div id="lightblue"></div>
    <div id="lightgreen"></div>
    <div id="lightpink"></div>
    <div id="lightsalmon"></div>
</div>

2、通过Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

语法：Element.scrollIntoView({behavior：'auto', block: 'start', inline: 'nearest'})
behavior （可选）：定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block （可选）：定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline （可选）：定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

<div class="box">
      <ul>
             <li>lightblue</li>
             <li>lightgreen</li>
             <li>lightpink</li>
             <li>lightsalmon</li>
      </ul>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>
<script>
        let list = document.querySelectorAll('li');
        let divs = document.querySelectorAll('.box>div');
        for (let i = 0, len = list.length; i < len; i++) {
            list[i].onclick = function() {
              divs[i].scrollIntoView({
                  block:  'start', 
                  behavior:  'smooth', 
                  inline: 'center'
              });
            };
      }
</script>

注意：取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。

参考文档MDN

3、通过window.scrollTo()

window.scrollTo()方法可以使界面滚动到给定元素的指定坐标位置。

语法：
1、window.scrollTo(x-coord, y-coord)
x-coord：期望滚动到水平的位置
y-coord：期望滚动到垂直的位置
2、window.scrollTo(options)
options = {
 top: y-coord,
 left: x-coord,
 behavior: 'smooth'(平滑滚动) || 'instant'(瞬间滚动) || 'auto'(默认值)
}

<div class="box">
      <ul>
             <li>lightblue</li>
             <li>lightgreen</li>
             <li>lightpink</li>
             <li>lightsalmon</li>
      </ul>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>
<script>
        let list = document.querySelectorAll('li');
        let divs = document.querySelectorAll('.box>div');
        for (let i = 0, len = list.length; i < len; i++) {
            list[i].onclick = function() {
                window.scrollTo({ // 如果滚动元素不是window，可替换成滚动的元素
                    top: divs[i].offsetTop,
                    behavior: 'smooth'
                });
            };
        }
</script>

参考文档MDN