web-dev-qa-db-ja.com

Jquery Smooth Divへのスクロール-リンクからのID値の使用

そのため、特定のdivにスクロールすることになっているJQueryにいくつかの問題があります。

[〜＃〜] html [〜＃〜]

<div id="searchbycharacter">
    <a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a> 
    <a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a> 
    <a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a> 
    <a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a> 
    ... Untill Z
</div>

<div id="0-9">
    <p>some content</p>
</div>

<div id="A">
    <p>some content</p>
</div>

<div id="B">
    <p>some content</p>
</div>

<div id="C">
    <p>some content</p>
</div>

... Untill Z

JQuery

私がコードにしたいことは：.searchbychar A TAGのクリックイベントで> ID属性値を取得し、それまでスクロールする...

$( '.searchbychar' ).click(function() {

    $('html, body').animate({
        scrollTop: $('.searchbychar').attr('id').offset().top
    }, 2000);

});
javascriptjqueryhtmlparsing
21
Jack Tuck

IDは一意である必要があり、数字で始まるIDは使用せず、代わりにデータ属性を使用してターゲットを次のように設定します。

<div id="searchbycharacter">
    <a class="searchbychar" href="#" data-target="numeric">0-9 |</a> 
    <a class="searchbychar" href="#" data-target="A"> A |</a> 
    <a class="searchbychar" href="#" data-target="B"> B |</a> 
    <a class="searchbychar" href="#" data-target="C"> C |</a> 
    ... Untill Z
</div>

Jqueryに関しては：

$(document).on('click','.searchbychar', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('data-target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});
75
Patsy Issa

あなたはこれを行うことができます：

_$('.searchbychar').click(function () {
    var divID = '#' + this.id;
    $('html, body').animate({
        scrollTop: $(divID).offset().top
    }, 2000);
});
_

F.Y.I.

  • コードの最初の行のように、クラス名の前に_._（dot）を付ける必要があります。
  • $( 'searchbychar' ).click(function() {
  • また、コード$('.searchbychar').attr('id')はjQueryオブジェクトではなく文字列IDを返します。したがって、.offset()メソッドを適用することはできません。
5
palaѕн

私の解決策は次のとおりです。

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=\\#]:not([href=\\#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

このスニペットだけで、それぞれに対して新しいスクリプトを実行することなく、無制限の数のハッシュリンクと対応するIDを使用できます。

私はすでに別のスレッドでどのように機能するかをここで説明しました： https://stackoverflow.com/a/28631803/4566435 （またはここに 私のブログ投稿への直接リンク ）

明確化のために、私に知らせてください。それが役に立てば幸い！

3
Bibiano Wenceslao