Как переписать функцию со scrollIntoView?

Question

[Alexey1307]

Есть необходимость сделать несколько скролов к нужным местам на странице. Реализовал с помощью метода Element.scrollIntoView(). И всё вроде работает, но пришлось для каждого элемента писать свою функцию. По-этому возник следующий вопрос, можно ли реализовать это, одной функцией например передачей нужных параметров при вызове?

Код на Codepen

Пробовал так - не работает:

let btnCalendar = document.querySelector('.buttonCalendar'); //кнопка
let calendarElement = document.querySelector(".calendar"); // элемент к которому необхоимо проскролить

function bookingClick(elem) {
    elem.scrollIntoView({ block: "center", behavior: "smooth" });
}

btnCalendar.addEventListener('click', bookingClick(calendarElement)) //передаем нужный элемент в качестве параметра

Answer 1

[0xD34F]

Задать связь между кнопками и блоками с помощью data-атрибутов:

<div class="mainMenu">
  <button data-scroll-to="calendar">Раз</button>
  <button data-scroll-to="rooms">Два</button>
  <button data-scroll-to="maps">Три</button>
  <button data-scroll-to="contact">Четыре</button>
</div>
...
<div data-block="calendar">...</div>
<div data-block="rooms">...</div>
<div data-block="maps">...</div>
<div data-block="contact">...</div>

Сделать функцию, которая получает значение атрибута, находит соответствующий блок и выполняет прокрутку:

function scrollTo(block) {
  document.querySelector(`[data-block="${block}"]`).scrollIntoView({
    block: 'center',
    behavior: 'smooth',
  });
}

Воспользоваться этой функцией при обработке кликов по кнопкам:

document.querySelector('.mainMenu').addEventListener('click', e => {
  const block = e.target.dataset.scrollTo;
  if (block) {
    scrollTo(block);
  }
});

// или

document.querySelectorAll('[data-scroll-to]').forEach(function(n) {
  n.addEventListener('click', this);
}, e => scrollTo(e.target.dataset.scrollTo));

Comments

[Alexey1307]

Спасибо!)