javascript - 我希望我的 anchor 链接在 div 之前停止

Question

我有一个 jquery 脚本，它为我的 anchor 链接添加了一个“缓动”效果，唯一的问题是现在我有一个粘性导航，所以当导航滑动到 DIV 时它隐藏了它的一部分。

有没有办法将导航滑动到 div 开始之前？

anchor 链接缓动效果:

$(function () {
    "use strict";
    var $root = $('html, body');
    $('a').click(function () {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
});

HTML

        <nav>
            <ul class="navigation">
                    <li><a href="#donate">How to donate</a></li>
                    <li><a href="#locations">Drop-off locations</a></li>
                    <li><a href="#party">Party details</a></li>
            </ul>
        </nav>

谢谢。

Answer 1

我将使用此代码进行从顶部到所需部分的单个号召性用语(纯 JavaScript)

const scrollerBtn = document.getElementById('btn');
const sectionView= document.getElementById('section-view');
var headerHeight = document.getElementById('main-header').offsetHeight;

scrollerBtn.addEventListener('click', () => {

    // scroll to your element
    sectionView.scrollIntoView(true);

    // now calculate fixed header
    var scrolledY = window.scrollY;

    if (scrolledY) {
        window.scroll(0, (scrolledY - headerHeight));
    }
})