0

私の脳は揚げられていて、これについて頭を包むことはできません. 私は間違いなくプログラミングの初心者です。

私のページには、動的に生成された名前のリストがアルファベット順に表示されています。「A」で始まる姓を持つすべての人は、css クラス「letter_A」を取得します。「B」で始まる姓を持つすべての人は、css クラス「letter_B」などを取得します...

ページの上部にアンカーリンクのリスト (A - B - C - D - E - F - G - H - I など) があり、最初のアイテム (名前) にジャンプしたい特定のクラス。したがって、アンカー リンク「A」は、クラス「letter_A」を持つ最初のアイテムにジャンプします。アンカー リンク「B」は、クラス「letter_B」などを持つ最初のアイテムにジャンプします。

javascript (または jquery) を使用してこれを記述する最良の方法は何でしょうか?

4

3 に答える 3

1

これは仕事をするはずです：

$("a").click(function(){
    var firstItem = $(".letter_" + $(this).text()).first();
    var top = firstItem.offset().top;
    $("body,html").scrollTop(top);
});
于 2012-04-19T04:56:48.647 に答える
0

私は疲れているので、今は答えを書くべきではありませんが、次のようなことを試すことができます

$("a").click(function(e) {
    e.preventDefault();
    var offset = $('.letter_' + $(this).attr('href') + ':first').offset().top;   // find the scroll position of the class with letter_(whatever you clicked on)
    $('html, body').animate({ scrollTop:offset }, 300);  // scroll to that position
});
于 2012-04-19T04:55:25.637 に答える
0

プレーン HTML で動作

これには jQuery や JavaScript は必要ありません。単純な名前付きアンカーを使用できます。

<a href="#B">B Names</a> <!-- Clicking me... -->
...
<a id="B">               <!-- Will scroll down to me. -->

JavaScript / jQuery メソッド

jQuery を使用する必要がある場合は、次のようにします。

// Bind to all <a href="#B">B</a> within <ul class="letters">
$(".letters").on("click", function(e){
  e.preventDefault();
  // Ease the body's scrollTop value to our first matched letter
  $("body").animate({
    scrollTop: $(".letter_" + this.innerHTML).position().top
  }, 2000);
});
于 2012-04-19T04:51:05.437 に答える