Чтобы сделать плавный скролл в CSS, необходимо использовать JavaScript для добавления функционала плавной прокрутки. Можно использовать библиотеки, такие как jQuery или плагины для скроллинга, но мы рассмотрим пример написания скрипта на чистом JavaScript для плавного скролла.
HTML:
<a href="#section2" class="scroll-link">Go to section 2</a>
<section id="section1">
<h1>Section 1</h1>
<p>...</p>
</section>
<section id="section2">
<h1>Section 2</h1>
<p>...</p>
</section>CSS:
section {
height: 100vh;
}Здесь мы создали две секции на странице и ссылку на вторую секцию.
JavaScript:
(function() {
// выбираем элементы
var scrollLinks = document.querySelectorAll('.scroll-link');
// добавляем обработчики кликов на ссылки
for (var i = 0; i < scrollLinks.length; i++) {
scrollLinks[i].addEventListener('click', function(event) {
event.preventDefault(); // отменяем стандартное поведение ссылки
var sectionId = this.getAttribute('href'); // получаем id секции, к которой ведет ссылка
var section = document.querySelector(sectionId); // выбираем секцию
window.scrollTo({
top: section.offsetTop, // задаем позицию прокрутки
behavior: 'smooth' // задаем плавный скролл
});
});
}
})();Здесь мы выбираем все ссылки с классом «scroll-link», добавляем обработчики кликов, отменяем стандартное поведение ссылки, получаем id секции, к которой ссылка ведет, выбираем секцию и задаем позицию скролла для этой секции с плавным эффектом.
Важно отметить, что этот код должен быть размещен после HTML-кода на странице. Также необходимо проверить его работу в различных браузерах и устройствах, чтобы убедиться в его корректной работе на всех платформах.
