锚点---笔记1.a标签缺点：点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题2.window.locat

1.a标签

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .anchor {
      position: fixed;
      left: 50px;
    }
    .content > div {
      margin-left: 200px;
      height: 500px;
      width: 300px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="anchor">
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
  </div>
  <div class="content">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
  </div>
</body>
</html>

缺点：点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题

2.window.location.hash

$('.anchor .div3').on('click', function(event) {
  window.location.hash = 'div3';
})

缺点：点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题

3.animate

$('.anchor .div3').on('click', function(event) {
    $('html, body').animate({
    scrollTop: $('#div3').offset().top
  })
})

缺点：页面复杂时，偏移值可能会发生变化需要算法辅助

4.scrollIntoView()

element.scrollIntoView(scrollIntoViewOptions)

document.querySelector('#divide-setting').scrollIntoView({ 
  behavior: 'smooth', // 动画过渡效果, 'auto'(default)/'smooth'
  block: 'start', // 垂直方向的对齐,'start'(default)/'center'/'end'/'nearest'
  inline: 'start' // 水平方向的对齐, 'start'/'center'/'end'/'nearest'(default)
});

element.scrollIntoView(alignToTop)

/**
* true 对应scrollIntoViewOptions: {block: 'start', inline: 'nearest'}
* false 对应scrollIntoViewOptions: {block: 'end', inline: 'nearest'}
*/
document.querySelector('#divide-setting').scrollIntoView(false);