Этот вопрос закрыт для ответов, так как повторяет вопрос Как сделать плавную прокрутку страницы до якоря?
@Kundako

Как сделать плавную прокрутку до блока?

Добрый день, эксперты.

Есть html

<div class="title">
   <div class="name1 open"><span>Название1</span></div>
   <div class="name2"><span>Название2</span></div>
   <div class="name3"><span>Название3</span></div>
</div>


и

<div class="table">
   <table></table>
   <table></table>
   <table></table>
</div>


Название 1 соответствует первой таблице на странице, Название 2 - второй и т.д.
Одновременно видно только одно из названий и все таблицы.
Как реализовать, чтобы при нажатие на span осуществлялась автоматическая прокрутка до соответствующей таблицы. Пытался сделать с помощью .eq(), привязав первый span к первому table, но что-то не получается, может подскажите как лучше сделать?
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
  • drymind404
    @drymind404
    веб-разработчик
    Можете задать таблицам классы/id, добавить спанам атрибуты data, например, data-destination (просто атрибут для хранения информации) и у каждого спана написать туда нужное место назначения, например, для .name1 span указать data-destination=".table1". Можно вместо этого задать элемент с помощью nth-child: ".table table:nth-child(1)", если не хотите добавлять класс/id к таблицам) Потом в jquery реализовать скролл через .animate:

    $('.title span').on('click', function() {
      var destination = $(this).data('destination');
      $('html, body').animate({
        scrollTop: $(destination).offset().top
      }, 1000);
    });


    Тут при нажатии на .title span происходит плавный скролл (в течении 1000 мс - 1 секунды) к позиции элемента, заданного в атрибуте data-destination у span'а, на который было произведено нажатие. Обычно я это реализую так, потому что если делать через атрибут href тега "a" то же самое, приходится еще и делать preventDefault, иначе в адресной строке появляется еще и якорь вида #элемент в конце адреса, что мне не нравится) Но в принципе это можно реализовать как хотите)
    Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы