div点击按钮使页面定位滑动到指定位置

我们经常要实现点击侧边栏菜单使页面滑动到指定的对应位置这一功能，今天来分享一下实现这个功能的两种方法。

1.使用id实现定位。

优点：简单便捷；缺点：无动画

<div>
  <div>
    <a href="#A1">锚点1</a>
    <a href="#A2">锚点2</a>
  </div>
  <div id="A1">anchor1</div>
  <div id="A2>anchor2</div>
</div>

命名要点击的按钮链接为“#”+要跳转到位置元素的id即可实现。

2.使用js实现定位

在按钮位置添加οnclick="scrollToView()"

<div onclick="scrollToView()"></div>

之后添加scrollToView ()，将id与要跳转到位置元素的id对应即可。

<script type="text/javascript">
    function scrollToView () {
        document.getElementById('A1').scrollIntoView({
            block: 'start',
            inline: 'nearest',
            behavior: 'smooth'
        })
    }
</script>