Skip to content

Instantly share code, notes, and snippets.

@morphIsmail
Last active March 16, 2023 19:20
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save morphIsmail/06a3820225a0a6a0aa8e77bdfb597aed to your computer and use it in GitHub Desktop.
Save morphIsmail/06a3820225a0a6a0aa8e77bdfb597aed to your computer and use it in GitHub Desktop.
Меню с плавной прокруткой на чистом 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
Copy link
Author

morphIsmail commented Oct 16, 2020

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

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

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

@Ildar2607
Copy link

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

@morphIsmail
Copy link
Author

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

@Shade121
Copy link

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

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

@Shade121
Copy link

А можно добавить сюда прокрутка + высота шапки, которая перекрывает контент?
По аналогии с этим кодом на 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