У меня есть вот такой скрипт
document.addEventListener('DOMContentLoaded', function () {
// Находим все ссылки с классом anchor_link
var links = document.querySelectorAll('.anchor_link');
// Добавляем обработчик событий на каждую ссылку
links.forEach(function (link) {
link.addEventListener('click', function (event) {
// Получаем href ссылки
var href = this.getAttribute('href');
// Проверяем, является ли ссылка абсолютной или относительной (переход на другую страницу)
if (href.startsWith('#')) {
// Отменяем стандартное поведение ссылки
event.preventDefault();
// Получаем ID якоря из атрибута href ссылки
var targetId = href;
var targetElement = document.querySelector(targetId);
// Проверяем, существует ли элемент с данным ID
if (targetElement) {
// Расчитываем позицию элемента относительно верхней части документа
var targetPosition = targetElement.getBoundingClientRect().top + window.scrollY;
// Вычисляем новую позицию с отступом 60 пикселей
var offsetPosition = targetPosition - 60;
// Вызов функции для плавной прокрутки
smoothScrollTo(offsetPosition);
}
} else {
// Если это не якорная ссылка, просто переходим по адресу
window.location.href = href;
}
});
});
function smoothScrollTo(targetPosition) {
const startPosition = window.scrollY;
const distance = targetPosition - startPosition;
const duration = 500; // Длительность анимации в миллисекундах
let startTime = null;
function animation(currentTime) {
if (!startTime) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const progress = Math.min(timeElapsed / duration, 1); // Нормализуем значение от 0 до 1
// Используем функцию easing (к примеру, easeInOutQuad)
const easing = easeInOutQuad(progress);
window.scrollTo(0, startPosition + distance * easing);
if (timeElapsed < duration) {
requestAnimationFrame(animation);
}
}
// Начинаем анимацию
requestAnimationFrame(animation);
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
});
<p><a href="sample.html#a" class="anchor_link">ссылка1</a></p>
<p><a href="sample.html#d" class="anchor_link">ссылка2</a></p>
<p><a href="#c3" class="anchor_link">ссылка3</a></p>
<p><a href="#d4" class="anchor_link">ссылкаd</a></p>
<p><a href="#e5" class="anchor_link">ссылкаe</a></p>
И мне нужно что бы при переходе на другую страницу отступ от верхней границы браузера сохранялся в 60 пиксилей.
Я пробывал записывать в локам стендж и потом затирать его но не получилось по другому не понимаю как.
