Question

我试图创建一个＆＃39; scrollTo＆＃39;将页面上较高的内容链接到页面上较低信息的位置。我目前使用以下代码处理一个项目。可以根据需要修改这两组代码。

标记（Twig）：

<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来获得最佳解决方案。

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

[('world’s', 'NUM'), ('leading', 'VERB'), ('company', 'NOUN')]

我建议给每个按钮一个数据属性和一个类来绑定点击。在click事件中，使用data属性滚动到正确的ID。

scrollTo动态内容的功能

2 个答案: