Для создания плавного скролла к якорю на новой странице вам потребуется использовать JavaScript. Вот пошаговая инструкция:
1. Создайте якорь в HTML-коде страницы, к которому вы хотите создать плавный скролл. Пометьте якорь уникальным идентификатором с помощью атрибута id
. Например:
<a id="myAnchor"></a>
2. Вам понадобится JavaScript-код для реализации плавного скролла. Поместите его внутри тега <script>
. Начните с создания обработчика события для клика на ссылку, которая будет вызывать скролл:
document.addEventListener('DOMContentLoaded', function() { var links = document.querySelectorAll('a[href^="#"]'); for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', smoothScroll); } })
Этот код выбирает все ссылки на странице, чей атрибут href
начинается с символа #
, и добавляет обработчик события на каждую ссылку.
3. Определите функцию smoothScroll
, которая будет вызываться при клике на ссылку:
function smoothScroll(event) { event.preventDefault(); var targetId = event.currentTarget.getAttribute('href'); var targetPosition = document.querySelector(targetId).offsetTop; var startPosition = window.pageYOffset; var distance = targetPosition - startPosition; var duration = 1000; // Длительность анимации (в миллисекундах) var start = null; window.requestAnimationFrame(step); function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration)); if (progress < duration) { window.requestAnimationFrame(step); } } } function easeInOutCubic(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t * t + b; t -= 2; return c / 2 * (t * t * t + 2) + b; }
4. Обработчик события вызывает функцию smoothScroll
, которая рассчитывает позицию элемента, к которому должен быть выполнен скролл, и запускает анимацию скролла с помощью requestAnimationFrame
.
5. Функция smoothScroll
использует функцию easeInOutCubic
для создания плавного эффекта скролла. Вы можете использовать другие алгоритмы интерполяции для создания различных эффектов.
6. И, наконец, не забудьте подключить ваши стили в HTML-коде:
<link rel="stylesheet" href="styles.css">
7. Запустите вашу страницу и проверьте, что плавный скролл к якорю работает правильно.
Это подробная инструкция по созданию плавного скролла к якорю на новой странице с использованием JavaScript. Обратите внимание, что вы можете настроить длительность анимации, выбрать другой алгоритм интерполяции и добавить свои собственные стили для анимированного эффекта.