jquery - 如何创建一个单页导航？

有一阵子，我试图编写一个不错的工作页面导航，滚动到右边的锚点区域并在菜单中更新他的当前状态。

那我需要哪种功能呢？
-处理click事件的功能：当用户单击锚链接时，它应滚动到该部分并更新菜单的当前状态。


滚动时摆脱活动状态的功能。


除此之外，我使用了固定的标头。因此标题的高度应减去滚动位置，以避免粘性标题与内容重叠。

想到了这个：

// An offset to push the content down from the top
    var offset = $('#header').outerHeight();




    $('#primary-navwrapper').find('li a[href^="#"]').click(function(event) {

        // Current class switch
        $(this).removeClass("current");
        $(this).addClass("current");


        // The id of the section we want to go to.
        var anchorId = $(this).attr("href");


        // Our scroll target : the top position of
        // the section that has the id referenced by our href.
        var target = $(anchorId).offset().top - offset;
        //console.log(target);


        $('html, body').animate({ scrollTop: target }, 500, function () {
            window.location.hash = anchorId;
        });


        // Prevent from default action to intitiate
        event.preventDefault();
        return false;

    });

function setActiveListElements(event) {

        // Get the offset of the window from the top of page
        var windowPos = $(window).scrollTop();

        $('nav li a[href^="#"]').each(function() {
            var currentId = $(this);
            console.log(this);

            // if for active
            var target = currentId.attr("href");
            console.log(target);

            var offsetTop = target.position().top - offset;
            //var offsetBottom = offsetTop + target.height();

            if (target.length > 0) {
                console.log(target.position().top + target.height());
                if (target.position().top - offset <= windowPos && target.position().top + target.height() > windowPos) {
                    $('#primary-navwrapper li a').removeClass("current");
                    $(this).addClass("current");
                }
            }

        });

    }

它将滚动到其位置，但不会更新当前状态。除此之外，我还尝试在滚动时更新URL中的哈希，但不知道如何完成此操作。

我也不是不是可以将其缩短和更好地编码，所以欢迎提出建议:)

最佳答案

看看这个名为SMINT的jQuery插件。我想这就是你所追求的。

http://www.outyear.co.uk/smint/

如果这是解决方案，请不要忘记单击“勾号”将其标记为正确答案。如果您希望使用当前代码，那么我可以为您提供帮助（请在下面的评论中，我会为您提供帮助），但我确实认为此插件是一种更简单的方法，但是我不知道这是否是您所追求的。