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;
    });
});

ただし、この方法の問題点は、#anchor 部分を追加するために URL が変更されないため、ユーザーが希望どおりにページをブックマークできないことです。

URLが変更される場所でこれを行う方法はありますか? 幅広いブラウザー互換性が必要なので、URL を変更できないと思います。ウィンドウのスクロール イベントを監視して、URL ハッシュが変更されたかどうかを確認し、変更された場合は 50 ピクセルの調整を行うことができると考えていました。しかし、より良い方法はありますか？

4

2 に答える 2

0

これは実際には複雑な問題です。BBQと呼ばれるこの問題を解決するために特別に設計された優れたプラグインがあります。1つの問題（まだ気付いていないかもしれませんが）は、戻るボタンの使用です。ユーザーは、リンクをクリックする前に、戻るボタンが最後の場所に「移動」することを期待しています。あなたがそれを支持しないなら、あなたは非常に悲しいユーザーを持つでしょう。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 に答える