Estoy intentando crear un enlace 'scrollTo' para el contenido más arriba en la página a un lugar con más información más abajo en la página. Actualmente lo tengo funcionando para un artículo con el siguiente código. Ambos conjuntos de código se pueden modificar según sea necesario.

Marcado (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);
  });
}

Como puede ver, solo tengo esto funcionando para un elemento: término 16. ¿Cómo puedo abstraer / modificar esto para que funcione con todos los ID de término que se completan?

Está integrado en Drupal 8 y utiliza el módulo Vistas. y no estoy seguro de si necesito usar drupal.settings / drupal.behaviors para la solución óptima.

0
e.shell 14 dic. 2016 a las 00:30

2 respuestas

La mejor respuesta

Tratar...

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>
1
Fodsqa Sadnes 13 dic. 2016 a las 22:19
<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);
    });
}

Sugiero darle a cada botón un atributo de datos y una clase para vincular el clic. En el evento de clic, use el atributo de datos para desplazarse hasta la ID correcta.

0
Fluchaa 13 dic. 2016 a las 22:21