1

Возможно ли реализовать прокрутку блоков сайта по нажатию на кнопки, используя только ванильный JS или CSS? Возможно, вопрос не совсем корректный, так как я не совсем понимаю как это называется. Чтобы изобразить свои мысли более понятно, прибегу к очевидному примеру: при нажатии кнопки About появится один блок, при нажатии на Home пролистывается к другому. Если вопрос всё равно не совсем понятный, не требую прямого решения проблемы, но нужна хотя бы наводка, куда двигаться чтобы реализовать идею.

1
  • Если есть простое решение с использованием JQuery - тоже подойдёт.
    – Ilya
    24 сен 2019 в 17:46

3 ответа 3

2

$('a[data-id]').click(function() {
    const block_id = $(this).attr('data-id');
    const block = $(`.block[data-id=${block_id}]`);
    const offsetLeft = block.offset().left;
    $(".container").animate({scrollLeft: offsetLeft}, 1000, "swing");
});
.container{
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.block{
  width: 75vw;
  height: 100px;
  display: inline-block;
  background-color: rgba(0,0,0,0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block" data-id="1">
    <h2>First slide</h2>
    <a href="#!" data-id="3">to 3 slide</a>
  </div>
  <div class="block" data-id="2">
    <h2>Two slide</h2>
    <a href="#!">Non slide</a>
  </div>
  <div class="block" data-id="3">
    <h2>Three slide</h2>
    <a href="#!" data-id="1">to first slide</a>
  </div>
  <div class="block" data-id="4">
    <h2>Four slide</h2>
    <a href="#!">Non slide</a>
  </div>
</div>

0
0

Скролл к блоку:

$("html, body").animate({scrollTop: block.offset().top});

Ну а навесить события - думаю, и так всё понятно

3
  • Горизонтальный же скролл требуется, а не вертикальный. Хоть бы вопрос читали внимательно :( 24 сен 2019 в 18:13
  • 1
    @humster_spb, Ок, тогда так: $("html, body").animate({scrollLeft: 58}); Если нужен скролл внутри блока, то $(block).animate({scrollLeft: какое_то_значение}); 24 сен 2019 в 18:30
  • так в чем проблема переделать данный вариант под себя? Там менять то и не особо много, изучили бы для начала данный скрипт.
    – MoloF
    24 сен 2019 в 19:09
0
function scrollTo(desiredElement) { //передаете нужный элемент, до которого хотите прокрутить, как аргумент desiredElement
    const distance = desiredElement.getBoundingClientRect().left + window.pageXOffset; //расстояние от начала документа по оси X до нужного нам элемента
    window.srollTo(distance ,0); //скролимся до этого элемента
}

чистый JS. ну и вешаете обработчик клика и передаете ему эту функцию. должно, вроде бы, сработать. если хотите плавный переход, то используйте requestAnimationFrame. и да, может и не работать, так как проверить пока не могу :D

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.