动态内容的滚动到功能答案

【问题标题】：scrollTo functionality for dynamic content动态内容的滚动到功能
【发布时间】：2016-12-13 21:30:27
【问题描述】：

我正在尝试为页面上方的内容创建一个“滚动到”链接，指向页面下方有更多信息的位置。我目前使用下面的代码为一个项目工作。两组代码都可以根据需要进行修改。

标记（树枝）：

<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。我如何抽象/修改它以使用所有填充的 term ids？

这是在 Drupal 8 中构建的，并利用了 Views 模块。我不确定是否需要使用 drupal.settings / drupal.behaviors 来获得最佳解决方案。

【问题讨论】：

标签： jquery drupal-8

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：