2

そこで、Cedric Dugas の Anchor Slider を使用しています。誰かがリンクをクリックすると、リンクの href と同じ ID を持つ要素までページがスクロールされます... すべて標準的なものです。

しかし、私がやりたいのは、そのIDより約80ピクセル上で停止することです...これが私が持っているものです。

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 500
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top - 80;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
};

これは、80 ピクセル上に移動するコード行です。

var destination = $(elementClick).offset().top - 80;

問題は、Webkit ブラウザーでは正常に動作することですが、FF および IE では、80 ピクセル上で停止し、通常停止する位置まで突然下に移動します。

なぜこれが起こるのか、誰にも考えがありますか？

ありがとう！

4

2 に答える 2

1

これはブラウザの自然な動作です。フラグメントを含む URL にアクセスすると、ブラウザはフラグメントに対応する要素に移動しようとします。したがって、 https://stackoverflow.com/#h-recent-tagsを使用すると、ブラウザーは下 (または上) にスクロールして、ID の要素に移動しますh-recent-tags。

コードは、次のコマンドを発行するときに、この要素に移動するようにブラウザーに指示しています。

window.location.hash = elementClick;

これは、アニメーションが完了した後に発生するため、ブラウザーが元の場所からすぐにジャンプするのがわかります。

求めている効果を得るには、別のアプローチを取る必要があります。pushState新しいブラウザでは、フラグメントを直接改ざんするよりも、を使用したほうがよいでしょう:

history.pushState(null, null, elementClick);

これにより、ページに影響を与えずにハッシュが更新されます。ただし、これは最新のブラウザーでのみ機能することに注意してください。古いバージョンの IE に関しては、別のアプローチを取る必要があります。そのようなアプローチの 1 つは、アプローチの使用にフォールバックするlocation.hashことですが、スクロールする前にハッシュを設定します。

$(caller).on("click", function (event) {
    // Prevent default behavior of anchor
    event.preventDefault();

    // Get href value from anchor clicked
    var elementClick = $(caller).attr("href");

    // If the browser supports the History api, use it to update hash
    // Otherwise update hash before we animate the scrolling
    if (history && history.pushState) {
        history.pushState(null, null, elementClick);
    } else {
        window.location.hash = elementClick;
    }

    // Determine where 80px above target is
    var destination = $(elementClick).offset().top - 80;

    // Scroll to that new location
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: destination
    }, settings.speed);
});

古いブラウザーでは、これによりすぐに目的の場所に移動し、ゆっくりと上にスクロールしてパディングを行います。

于 2013-01-03T20:36:21.180 に答える