通过单击链接滚动到Div

Question

我的代码如下所示：

＆＃13;

＆＃13;

$(document).on('click', 'a[href^="#"]', function(e) {
    var id = $(this).attr('href');

    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    e.preventDefault();

    var pos = $id.offset().top;
    
    $('body, html').animate({scrollTop: pos});
});

＆＃13;

body{
  min-height: 1000px  
}
div{
  min-height: 300px;
  margin: 20px 0;
  background: red
}
#section-2{
  background: blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<div id="section-1"></div>
<div id="section-2"></div>

＆＃13;

＆＃13;

＆＃13;

这适用于<a href="#secton-1">Section 1</a>

但我在同一页面上有很多不同的div。

这样的网址：<a href="/about/#secton-1">Section 1</a> 它是如何工作的？谁能帮我？提前谢谢！