Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Меню с плавной прокруткой на чистом JavaScript
// Найти все ссылки начинающиеся на #
const anchors = document.querySelectorAll('a[href^="#"]')
// Цикл по всем ссылкам
for(let anchor of anchors) {
anchor.addEventListener("click", function(e) {
e.preventDefault() // Предотвратить стандартное поведение ссылок
// Атрибут href у ссылки, если его нет то перейти к body (наверх не плавно)
const goto = anchor.hasAttribute('href') ? anchor.getAttribute('href') : 'body'
// Плавная прокрутка до элемента с id = href у ссылки
document.querySelector(goto).scrollIntoView({
behavior: "smooth",
block: "start"
})
})
}
@morphIsmail

This comment has been minimized.

Copy link
Owner Author

@morphIsmail morphIsmail commented Oct 16, 2020

Позволяет плавно перемещаться по якорям на странице. У ссылки a должен быть установлен атрибут href, он начинается с # и дальше идет идентификатор блока к которому нужно переместиться. Если атрибут href пустой то переместимся к body (но не плавно).

У блока к которому нужно переместиться нужно добавить id, текст как и в href ссылки но без решетки.

Данный код работает во всех современных браузерах кроме IE и старого Edge (в новом Edge все работает так как движок у него Chromium)

@Ildar2607

This comment has been minimized.

Copy link

@Ildar2607 Ildar2607 commented Dec 13, 2020

А можно добавить сюда прокрутка + высота шапки, которая перекрывает контент?

@morphIsmail

This comment has been minimized.

Copy link
Owner Author

@morphIsmail morphIsmail commented Dec 16, 2020

А можно добавить сюда прокрутка + высота шапки, которая перекрывает контент?
По аналогии с этим кодом на jQuery можно сделать и на JS
https://gist.github.com/morphIsmail/218945bf207720282a1b07d3395a719f

@Shade121

This comment has been minimized.

Copy link

@Shade121 Shade121 commented Aug 26, 2021

А можно добавить сюда прокрутка + высота шапки, которая перекрывает контент?
По аналогии с этим кодом на jQuery можно сделать и на JS
https://gist.github.com/morphIsmail/218945bf207720282a1b07d3395a719f

Если не затруднит, подскажите как это сделать, второй день сижу над этой проблемой+добавилась еще одна, при этом коде пропала анимация.

@Shade121

This comment has been minimized.

Copy link

@Shade121 Shade121 commented Aug 26, 2021

А можно добавить сюда прокрутка + высота шапки, которая перекрывает контент?
По аналогии с этим кодом на jQuery можно сделать и на JS
https://gist.github.com/morphIsmail/218945bf207720282a1b07d3395a719f

Если не затруднит, подскажите как это сделать, второй день сижу над этой проблемой+добавилась еще одна, при этом коде пропала анимация.

JS только начал изучать, простите если побеспокоил.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment