javascript - 如何通过滑动而不是直接进入网站的一部分？

Question

我正在尝试使用 bootstrap 创建一个网站，我想从导航栏本身转到我主页中的 div。我已将我的 div 的 id 传递到我的导航栏中的 anchor 标记，但问题是它直接进入到那部分，但我想像在这个网站上做的那样滑到那部分when you click on the navbar elements it slides rather than directly going

如何做到这一点？

Answer 1

一种方式是使用已有的bootstrap模板，顶部有Fixed Navigation Bar，滑动流畅，页面高亮效果。在这里查看:http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

另一种方法是向所有 anchor 添加一个通用类，例如说“page-scroll”，并在其上绑定(bind)点击事件，如下所示:

JQUERY:

$(document).on("click", "a.page-scroll", function(e){
    e.preventDefault(); // To prevent it from directly going to the section.
    $("html, body").animate({
         scrollTop: $($(this).attr("href")).offset().top}, // It store the section id 
    1000);
});

HTML( anchor 链接片段):

<a href="#section1" class="page-scroll">Section 1</a>
.....
.....
.....
<div id="section1">
....
.... 
....
</div>