Решил написать для себя небольшую заметку, редко, но бывает, что нужно сделать плавную прокрутку по нажатию ссылки к якорю на странице. Раньше я использовал способ написанный на jQuery
, сейчас он также актуален и выглядит так:
var $page = $('html, body');
$('a[href*="#"]').click(function() {
$page.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 400);
return false;
});
Есть также код написаный на чистом javascript. Выглядит он так:
let anchors = document.querySelectorAll('a[href*="#"]');
anchors.forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const blockID = anchor.getAttribute('href').substr(1);
if(document.getElementById(blockID)) {
document.getElementById(blockID).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
что в первом, что во втором случае код срабатывает на ссылки вида:
<a href="#anchor-1">Ссылка к якорю 1</a>
и перемещает к блоку с id
anchor-1
<div id="anchor-1"> ... </div>