Пример:
HTML:
|
1 2 3 4 5 |
<a class="toBottom" data-to="section_1" href="javascript:void(0);">Низ секции 1</a> <a class="toBottom" data-to="section_2" href="javascript:void(0);">Низ секции 2</a> <div id="section_1">Секция 1</div> <div id="section_2">Секция 2</div> |
Где атрибут data-to указывает ID элемента, к низу которого нужно прокрутить страницу.
JS:
|
1 2 3 4 5 6 7 8 9 |
window.onload = function() { let nav = document.querySelectorAll(".toBottom"); for (let i = 0; i < nav.length; i++) { nav[i].onclick = function(){ let where = document.getElementById(nav[i].getAttribute("data-to")); window.scrollBy(0, where.getBoundingClientRect().top - document.documentElement.clientHeight + where.offsetHeight); }; } }; |
Для плавной прокрутки можно добавить CSS-свойство scroll-behavior:
|
1 2 3 |
html { scroll-behavior: smooth; } |
Секция 1
Секция 2
Секция с картинкой
Прикольное решение. Спасибо 😀
Это же обычные якорные ссылки,а почему название страницы прокрутка?
Якоря - на верх элемента.
У нас есть секции А Б В, и перейдя по якорю, мы попадем на верх этих секций.
Другими словами они равняются по верхней границе окна браузера.
А тут по нижнему.
Меня вчера попросили сделать, стало интересно, а как.
Решение редко применяемое, конечно, но кому то же понадобилось 🙂
А прокрутка... страницу прокручиваем в нужную точку. Не так?