2

このjQueryスニペットをロードして、アンカーリンクを介してページをスライドさせました。

http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/

私の場合、ページの上部に固定ブロック (position:fixed) があります。そのため、滑り落ちるにはデルタ値が必要です。このようなデルタ値を使用しないと、ページが深くスライドするため、アンカーリンクが固定ブロックによって隠されます。

この問題を解決する方法を知っている人はいますか?

どうも

4

2 に答える 2

0

元のプラグイン:

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, 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;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

変更:

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100,
          offset: 0
    }, 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;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination+settings.offset}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

offsetオプションを追加したことに注意してください。したがって、固定 div の高さが 60px の場合は、次のように呼び出します。$('#whatever').anchorAnimate({offset: 60});

于 2012-07-22T07:22:23.527 に答える
0

この行を編集することで解決策が必要です。

 window.location.hash = elementClick

持続時間の値を変更すると、正しい位置にスライドするのに役立ちます。しかし、ウィンドウはスライドの最後にオフセット値を「ジャンプ」します。

解決策：次の行を削除して問題を修正しました：

 window.location.hash = elementClick
于 2012-07-22T16:58:13.923 に答える