Как проскроллить страницу до нужного элемента (ярлыка) с помощью Javascript (jQuery)?

Question

[Иван Ильясов]

Суть проста. Кликаем на элемент, страница скроллится до нужного элемента.
Причем, обычная прокрутка до ярлыка # работает не всегда корректно.
Как лучше реализовать?

Answer 1

[Evgeniy]

const anchors = document.querySelectorAll('a[href*="#"]')

        for (let anchor of anchors) {
          anchor.addEventListener('click', function (e) {
            e.preventDefault()

            const blockID = anchor.getAttribute('href').substr(1)

            document.getElementById(blockID).scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            })
          })
        }

Comments

[Иван Ильясов]

Ок, а если нужно нажать на элемент с классом .one, чтобы он проскроллил до элемента с классом .two?
и это не обязательно ссылка.

[Evgeniy]

Например так: https://codepen.io/Zhelezniy/pen/XWMzmOK

const anchors = document.querySelectorAll('.one')

        for (let anchor of anchors) {
          anchor.addEventListener('click', function (e) {
            e.preventDefault()
  
            document.querySelector('.two').scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            })
          })
        }