Question

因为我有一个固定的位置标题，当点击锚链接时，标题会遮盖一些内容，所以我想修改位置，以便所请求的内容完全可见。我目前正在使用以下jQuery成功完成此任务：

$(document).ready(function () {
    $("a[href^='#']").click(function () {
        var id = $(this).attr("href");
        var newPosition = $(id).offset();
        if (newPosition != undefined) {
            window.scrollTo(newPosition.left, newPosition.top - 50);
        }
        else {
            window.scrollTo(0, 0);
        }
        return false;
    });
});

然而，此方法的问题在于URL永远不会更改以添加#anchor部分，因此用户无法按照我希望的方式为页面添加书签。

有没有办法在URL更改的情况下执行此操作？我需要广泛的浏览器兼容性，所以我认为我不能更改URL。我以为我可以监视窗口滚动事件并查看URL哈希是否已更改，如果是，则进行50像素调整。但是有更好的方法吗？

Answer 1

这实际上是一个复杂的问题。有一个很好的插件，专门用于解决这个问题BBQ。一个问题（你可能还没有意识到将是一个问题）是使用后退按钮。用户希望后退按钮在他们点击链接之前将其“带”到最后一个位置。如果你不支持你会有非常悲伤的用户。 BBQ能够解决这些问题并使后退按钮正常工作。

Answer 2

为了回答我自己的问题，我已经尝试了一个脚本，它可以完成所需的工作，当用哈希打开页面时，单击哈希，滚动后单击相同的哈希，并处理后退按钮。这似乎适用于流行的浏览器。

        $(document).ready(function () {
            var scrollOnReady = false;
            var lastHash = window.location.hash ? window.location.hash : "";
            if (lastHash != "") {
                scrollOnReady = true;
                setTimeout(function () {
                    var newPosition = $(lastHash).offset();
                    if (newPosition != undefined) {
                        if ($(window).scrollTop() == newPosition.top) {
                            window.scrollTo(newPosition.left, newPosition.top - 50);
                        }
                    }
                    else {
                        window.scrollTo(0, 0);
                    }
                }, 50);
            }

            $(window).scroll(function () {
                if (scrollOnReady) {
                    scrollOnReady = false;
                }
                else {
                    if ((window.location.hash ? window.location.hash : "") !== lastHash) {
                        lastHash = window.location.hash ? window.location.hash : "";
                        setTimeout(function () {
                            $(window).scrollTop($(window).scrollTop() - 50);
                        }, 50);
                    }
                }
            });

            $("a[href^='#']").click(function () {
                var hash = $(this).attr("href");
                if (hash === lastHash) {
                    lastHash = "";
                }
            });
        });

如何检测何时单击锚点并添加额外像素并保留URL

2 个答案: