scrollToの動的コンテンツの機能

Question

私は、ページ上のより高い情報のページに、より多くの情報がある場所に、より高いコンテンツの「scrollTo」リンクを作成しようとしています。私は現在、以下のコードで1つの項目のために働いています。両方のコードセットは、必要に応じて変更できます。

マークアップ（小枝）：

<a id="scroll-src-{{ term.id }}" class="content-scroll"> 
<!-- other page content --> 
<div id="scroll-dest-{{ term.id }}" class="content-scroll"></div> 

のjQuery：用語16：

if($('.content-scroll').length) { 
    $('#scroll-src-16').click(function() { 
    $('html, body').animate({ 
     scrollTop: $('#scroll-dest-16').offset().top - 87 
    }, 750); 
    }); 
} 

あなたが見ることができるように、私は一つのアイテムだけのためにこの作業を持っています。これを抽象化/変更して、用語IDがすべて入力されるようにするにはどうすればよいですか？

これはDrupal 8で構築され、Viewsモジュールを利用しています。最適な解決策のためにdrupal.settings/drupal.behaviorsを使用する必要があるかどうかは不明です。

Answer 1

試してみてください...

のjQuery

if($('.content-scroll').length) { 
    $('.scroll-link').click(function() { 
    var number = $(this).attr('data-scroll-id'); 
    $('html, body').animate({ 
     scrollTop: $('#scroll-dest-'+number).offset().top - 87 
    }, 750); 
    }); 
} 

HTML

<a id="scroll-src-{{ term.id }}" data-scroll-id="{{ term.id }}" class="scroll-link content-scroll"> 
<!-- other page content --> 
<div id="scroll-dest-{{ term.id }}" class="content-scroll"></div> 

Answer 2

<a id="scroll-src-{{ term.id }}" class="content-scroll button" data-id="{{ term.id }}"> 
<!-- other page content --> 
<div id="scroll-dest-{{ term.id }}" class="content-scroll"></div> 



if($('.content-scroll').length) { 
    $('.button').click(function() { 
     $('html, body').animate({ 
      scrollTop: $('#scroll-dest-'+$(this).data('id')).offset().top - 87 
     }, 750); 
    }); 
} 

私はすべてのボタンをデータ属性とクリックをバインドするクラスを与える示唆に。 clickイベントでは、data属性を使用して正しいIDにスクロールします。