Этот вопрос закрыт для ответов, так как повторяет вопрос Как сделать плавную прокрутку страницы до якоря?
@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, но что-то не получается, может подскажите как лучше сделать?
  • Вопрос задан
  • 297 просмотров
Пригласить эксперта
Ответы на вопрос 1
drymind404
@drymind404
front-end разработчик
Можете задать таблицам классы/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, иначе в адресной строке появляется еще и якорь вида #элемент в конце адреса, что мне не нравится) Но в принципе это можно реализовать как хотите)
Ответ написан
Ваш ответ на вопрос

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

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