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

Question

我想做的是设置scrollspy的偏移量，并使其平滑过渡到每个部分。 我希望不使用插件或数据属性（如果需要数据属性则可以），但是我想要一个采用以下javascript并添加平滑动画滚动效果的解决方案。 jQuery解决方案（如果可能）。

Scrollspy可以使用此代码，而offset可以使用以下代码：可能有人可以接受此代码并将其添加到其中以设置平滑过渡吗？

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中设置的，其边距将其与我的页眉和页脚偏移，页眉和页脚固定在顶部和底部，高度分别为60px。

<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

看起来您正在使用此答案中的代码。
该答案还指出，无法简单地更改Bootstrap进行的滚动平滑。

我建议你尝试像下面的代码不同的解决方案这个答案。

 $("#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; }); }); 

小提琴