0

jQuery の animate() 関数を jQuery UI プラグインのイージングと組み合わせて使用​​して、サイドバーのリンクでページを下にスクロールするアニメーションを作成しています。また、「トップに戻る」ボタンの操作にも使用しています。ここでライブを見ることができます：http ://www.element17.com/

トップに戻るボタンは完全に機能していますが、リンクの動作が不安定です。うまく機能する場合もあれば、スクロールを拒否したり、1、2 秒待ってからスクロールしたり、まったくアニメーション化せず、そもそもスクリプト化されていないかのようにページを下にジャンプしたりすることもあります。

トップに戻るボタンのコードは次のとおりです。

$('#go_up').click(function(){
  $('#main').animate({scrollTop:0}, 2000, 'easeOutExpo');
});

リンクのコードは次のとおりです。

$('.scroll').click(function(){
  $('#main').animate({scrollTop:$(this.hash).offset().top}, 3000, 'easeOutExpo');
});

OSX と Windows の Chrome でこれをテストしましたが、動作はどちらも不安定です。なぜこれが当てはまるのか、誰かが示唆できますか？

4

2 に答える 2

2

最初に、ハッシュ リンク ( ) からデフォルトの動作を防ぐ必要がreturn falseあり、さらに、指定された ID を持つ要素があるかどうかを確認する必要があります。

$('a[href*=#]').on('click', function() {
    var hash = $(this.hash).offset();
    if (hash) {
        $('#main').stop().animate({
            scrollTop: hash.top
        }, 3000, 'easeOutExpo');
        return false;
    }
});

更新 リンクと ID を有効なものに変更します。

  • #EN%20FLEURS -> #EN_FLEURS
  • #WWPW%202011 -> #WWPW_2011
  • #MUSEÉ%20DU%20LOUVRE -> #MUSEE_DU_LOUVRE
  • #FAIRYTALE%20ROAD -> #FAIRYTALE_ROAD

ところで

不要な場合 (ページの上部など) にトップへのスクロール リンクを非表示にするには、次のようにします。

$(window).scroll(function () {
    if ($(this).scrollTop() !== 0) {
        $('#go_up').fadeOut();
    } else {
        $('#go_up').fadeIn();
    }
});

css で非表示にします。

#go_up {display:none}
于 2012-09-15T00:25:28.223 に答える
1

$(this.hash).offset().top期待する値が常に提供されるとは限りません。つまり、div の先頭からです#main。ページの一番下までスクロールして一番下のリンクをクリックすると、offset().top絶対ではなく画面上で相対的になります。たとえば、負の値である可能性があります。ただし、animate の scrollTop には絶対スクロール位置が必要です。

1つの解決策は、

$('#main').animate({scrollTop:
       $(this.hash).offset().top - $('#CONSTRUCTS').offset().top},
   3000, 'easeOutExpo');

where#CONSTRUCTSは最上位の要素として機能します。

データがどの程度動的であるかによって、#main の左上隅にある何かに置き換えたい場合があります。

それを解決する他の多くの方法があります。

于 2012-09-15T00:16:30.297 に答える