Question

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

那样滑到那个部分

怎么做？

Answer 1

一种方法是使用现有的bootstrap模板，其顶部有固定导航栏，平滑滑动和页面突出显示效果。请在此处查看：http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

其他方法是向所有锚点添加一个公共类，例如说“页面滚动”，然后绑定点击事件，如下所示：

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（锚链接片段）：

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

如何通过滑动而不是直接去网站的一部分？

1 个答案: