0

私は自分のサイトで次のjqueryスクリプトを使用して、ブログエントリページを上部のコメントリンクから下部の実際のコメントまでスクロールダウンしています。

   jQuery(document).ready(function(){      
       var TopPosition = jQuery('#comments').offset().top;     
       jQuery('.comments-link').click(function(){        
           jQuery('html, body').animate({scrollTop:TopPosition}, 2000, 'swing');
           return false;
       });   
   });

また、「＃comments」が存在しない場合は、ページを「#respond」までスクロールダウンしたいのですが、これは、if / else / andを使用したjqueryでどういうわけか可能ですか？

また、コメントリンクのある別のページ（つまり、私のブログのインデックスページ）から個々のブログエントリのコメントにリンクしたり、アニメーションで下にスクロールしたりすることはできますか？

それが理にかなっていることを願っています。

4

1 に答える 1

3

が存在しない#respondときにスクロールしたい場合は、セレクターによって返されたオブジェクトの長さを確認してください... 0 の場合、ページ上にないため、代わりにofを使用できます。#commentsoffset().top#respond

jQuery(document).ready(function(){
   var comments = jQuery('#comments');
   var TopPosition = (comments.length==0)? 
       jQuery('#respond').offset().top :
       comments.offset().top;     
   jQuery('.comments-link').click(function(){        
       jQuery('html, body').animate({scrollTop:TopPosition}, 2000, 'swing');
       return false;
   });   
});

ページの読み込み時に下にスクロールするには、ハッシュ (たとえばpage.php#comments) を使用する必要がありますが、従来はアンカー タグ ( <a name="comments'></a>) があり、ページはそれにジャンプするだけでした。スムーズなスクロールが必要な場合は、スクロールを見てlocation.hashトリガーすることができます。これは事実上 と同じであるonClickため、両方を呼び出すことができる関数に分割します。

jQuery(document).ready(function(){
    // Set up the onClick() event
    jQuery('.comments-link').click(scrollToComments);

    // If the page is page.php#comments scroll to the comments/response
    if (location.hash=='#comments') scrollToComments();
});

// This function handles the scrolling on page load and onclick
function scrollToComments(){
    var comments = jQuery('#comments');
    // this can be moved outside the function, or recalculate in case the page redraws
    var scrollTopPosition = (comments.length==0)? 
       jQuery('#respond').offset().top :
       comments.offset().top;
    jQuery('html, body').animate({scrollTop:scrollTopPosition}, 2000, 'swing');
    return false;
}
于 2012-10-19T14:41:21.013 に答える