DIVを表示し、そのDIV内の要素に移動します

Question

現在、DIVの表示を解除してから、右にスクロールして要素に移動しようとしています。

私はアンカータグのリストを持つテキストのこの「インデックス」を持っていますが、別のIDのページを下にしてhrefしていますが、最初はテキストが隠されていて、リンク。私がスクロール部分に着くまで、これはすべてうまく動作します。

これまでのコードでは特別なことは何もありません。単にクライアントの動作に応じて&というCSSクラスを削除する単なるif文です。しかし、DIVが表示された後、ページを自動的にスクロールさせるにはどうすればよいですか？

私はこの解決策を試しました：How to go to specific to element on pageしかし、私は自分のスクリプトに収まるようには見えませんでした。私が最初に試した何

if ($('#<%=paragraph.ClientID%>').hasClass("readable")) { 
    $('#<%=paragraph.ClientID%>').removeClass("readable"); // Readable is the class that hides the paragraphs. 
    // Run function to scroll down to selected element here. 
} 
else { 
    $('#<%=paragraph.ClientID%>').addClass("readable"); 
} 

はこのようなものだった：

(function($) { 
     $.fn.goTo = function() { 
      $('html, body').animate({ 
       scrollTop: $(this).offset().top + 'px' 
      }, 'fast'); 
      return this; // for chaining... 
     } 
    })(jQuery); 

    function showParagraphs(elementId) { 
     if ($('#<%=paragraph.ClientID%>').hasClass("readable")) { 
      $('#<%=paragraph.ClientID%>').removeClass("readable"); 
      scrollToElement(elementId); 
     } 
     else { 
      $('#<%=paragraph.ClientID%>').addClass("readable"); 
     } 
    }; 

    function scrollToElement(elementId) { 
     $(elementId).goTo(); 
    }; 

しかし、上記のスクリプトは動作しませんでした。そして、私のjavascriptのスキルは限られているので、私は失礼だ。

ヒントや助けが素晴らしいです。ありがとうございました。

Answer 1

あなたのコードはほとんど動作しています。私はあなたがしたい要素のidを引っ張っているので、... scrollToElement('#<%=paragraph.ClientID%>')

でscrollToElement(elementId)を置き換える

...あなたが変更する必要がある唯一の事は、あなたのshowParagraphs機能であなただけに持っているということだと思いますサーバーからの影響であり、引き渡された引数ではありません。あなたは、代替として導入しようとすることができ

---

をそれはそれをしない場合は、here's a working demo that I threw together。

Answer 2

私はあなたの問題を正しく理解していれば、簡単な解決策です。イベントが終了するのを待つために、コールバック関数を使用してください。

例コード：

$('.clickable').onclick(function(){ 
    $('.mydiv').show('slow', function(){ 
    location.href = '#myElement'; 
    }); 
}); 

And link to jQuery.show() docs

ああ、多分それは混乱だ... '.clickable' あなたのアクションのトリガー（ボタン、リンク）で、 '.mydiv' あなたのdivがそれであります#myElementはスクロールしたい要素のIDです。