scrollTo функциональность для динамического содержимого

Question

Я пытаюсь создать ссылку «scrollTo» для контента, расположенного выше на странице, с более подробной информацией на странице. В настоящее время я работаю над одним элементом с кодом ниже. Оба набора кода могут быть изменены по мере необходимости.

Markup (Прут):

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

JQuery:

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

Как вы можете видеть, у меня только это работает для одного пункта: термин 16. Как я могу абстрагироваться/модифицировать это, чтобы работать со всеми терминами ids, которые заполняются?

Это устройство построено на 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 для прокрутки до нужного идентификатора.