1

因为我有一个固定位置的标题，当点击锚链接时，一些内容被标题遮住了，所以我想修改位置，使请求的内容完全可见。我目前正在使用以下 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 哈希是否已更改，如果是，则进行 50 像素调整。但是有更好的方法吗？

4

2 回答 2

0

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

于 2013-01-10T22:04:44.520 回答
0

为了可能回答我自己的问题，我尝试了一个脚本，该脚本在使用哈希打开页面时执行所需的操作，当您单击哈希时，当您在滚动后单击相同的哈希时，并且还处理后退按钮. 这似乎适用于流行的浏览器。

        $(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 = "";
                }
            });
        });
于 2013-01-11T00:31:54.723 回答