Bootstrap scrollspy - 如何使用 Jquery 或 JavaScript 设置偏移和平滑过渡到每个部分？

Question

我想做的是为 scrollspy 设置偏移量，并让它平滑过渡到每个部分。我宁愿不使用插件或数据属性（如果数据属性是必要的，那么好的），但我想要一个采用下面的 javascript 并添加平滑动画滚动效果的解决方案。如果可能的话，jQuery 解决方案。

Scrollspy 有效，偏移量适用于以下代码： 可能有人可以获取此代码并将其添加到其中以设置平滑过渡？

var offset = 60;

    $('.navbar li a').click(function(event) {
            event.preventDefault();
            $($(this).attr('href'))[0].scrollIntoView();
            scrollBy(0, -offset);
    });

我的 HTML/CSS 代码设置如下：

我有一个 .main-content 类的容器 div。这是在 css 中设置的，其边距从我的页眉和页脚偏移，页眉和页脚是固定的顶部和底部，每个高度为 60 像素。

<div class="main-content"></div> 的 CSS 如下：

.main-content {position: realtive; width: 100%; height: 100%; margin: 60px 0 60px 0;}

我在 .main-content 中有部分，每个部分都有一个 id="..."，HTML 看起来像这样。我已删除所有内容，以便您可以清楚地看到这些部分。

<div class="main-content" data-spy="scroll" data-target="#dl-menu">
    <section id="top" class="top">
        ...
    </section>
    <section id="services" class="services">
        ...
    </section>
    <section id="portfolio" class="portfolio">
        ...
    </section>
    <section id="pricing" class="pricing">
        ...
    </section>
    <section id="faq" class="faq">
        ...
    </section>
    <section id="quote" class="quote">
        ...
    </section>
</div>

我使用的菜单结构如下：

<div id="dl-menu" class="dl-menuwrapper">
    <button class="dl-trigger">Open Menu</button>
    <ul class="dl-menu">
        <li><a href="#top">BACK TO TOP</a></li>
        <li><a href="#services">OUR SERVICES</a></li>
        <li><a href="#portfolio">OUR PORTFOLIO</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#quote">GET YOUR QUOTE</a></li>
    </ul>
</div>

我对 Jquery/JavaScript 很陌生，并且已经尝试了我能找到的所有解决方案，但没有找到适合我的布局的解决方案。如果有人能帮我解决这个问题，我将不胜感激！

Answer 1

在弄乱了leuan 的答案之后，这个脚本开始变得有意义，我能够结合我从你在答案中提供的链接中找到的一些信息，这似乎适用于我正在使用的设置.

$(".dl-menu li a[href^='#']").on('click', function(e) {

        // This sets the hash
        var target;
        target = this.hash;

        // Prevent default anchor click behavior
        e.preventDefault();

        // The grabs the height of my header
        var navOffset;
        navOffset = $('#header').height();

        // Animate The Scroll
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - navOffset
        }, 600, function(){

        // Adds hash to end of URL
        return window.history.pushState(null, null, target);

        });

});

我要感谢 leuan 的所有帮助，正是他的帮助让我找到了这个解决方案。我希望这对其他人有用，就像对我一样。

这是小提琴 - https://jsfiddle.net/wptjzbno/4/

Answer 2

看起来您正在使用来自this 答案的代码。
该答案还指出，无法简单地更改 Bootstrap 完成的滚动平滑。

我建议尝试不同的解决方案，例如 this 答案中的以下代码。

$("#nav ul li a[href^='#']").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

fiddle