当点击锚点后，页面滚动到相应的DIV

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/81667181

用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

html页面：

<div id="container">
     <p id="p1">div1</p>
      <p id="p2">div2</p>
      <p id="p3">div3</p>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>

css样式：

div {
      height: 800px;
      width: 400px;
      border: 2px solid black;
    }
#container{
      position: fixed;
     margin:50px 500px;
}

js代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(document).ready(function() {
  $("#p1").click(function() {
    $("html, body").animate({
      scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#p2").click(function() {
    $("html, body").animate({
      scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#p3").click(function() {
    $("html, body").animate({
      scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
});