Как скорректировать якорь с фиксированной шапке при переходе с другой страницы?
Есть блоки на главной, на которые могут переходить с других страниц.
И есть скрипт, который корректирует переход по якорю, с учетом фиксированной (плавающей) шапки, но он работает только на главной:
$(document).ready(function() { $('nav ul li a[href^="#"]').click(function() { elementClick = $(this).attr("href") destination = $(elementClick).offset().top; $('html,body').stop().animate({ scrollTop: destination - 100 }, 200); return false; }); }); |
$(document).ready(function() { $('nav ul li a[href^="#"]').click(function() { elementClick = $(this).attr("href") destination = $(elementClick).offset().top; $('html,body').stop().animate({ scrollTop: destination - 100 }, 200); return false; }); });
Как скорректировать этот скрипт, чтобы он работал при переходе с другой страницы? Сейчас переход с других страниц есть, но без коррекции
Дополнительно:
Я конечно дико извиняюсь а зачем ссылки скриптом имплементировать?
https://developer.mozilla.org/en-US/docs/Web/CSS/s...
Может скрипт и не нужен?
Ответы:
В примере код написан на событие клика по ссылке.
Нужно сделать так, чтобы он срабатывал при загрузке страницы
Соответственно примерно так:
$(document).ready(function() { var urlParams = new URLSearchParams(window.location.hash.replace("#","?")); var hash = urlParams.get('hash'); var destination = $(hash).offset().top; $('html,body').stop().animate({ scrollTop: destination - 100 }, 200); }); |
$(document).ready(function() { var urlParams = new URLSearchParams(window.location.hash.replace("#","?")); var hash = urlParams.get('hash'); var destination = $(hash).offset().top; $('html,body').stop().animate({ scrollTop: destination - 100 }, 200); });
- Выдает ошибку:
Uncaught TypeError: Cannot read properties of undefined (reading 'top') - hash выводится как null, судя по console.log
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы скорректировать якорь с фиксированной шапкой при переходе с другой страницы, вам потребуется добавить небольшой скрипт на JavaScript.
Когда пользователь переходит по якорю на вашу страницу, браузер автоматически перемещает его к соответствующему элементу на странице. Однако, если у вас есть фиксированная шапка, то верхняя часть вашего элемента может быть скрыта за ней.
Для того чтобы исправить эту проблему, вам нужно добавить небольшой скрипт, который будет учитывать высоту вашей шапки и корректировать позицию скролла после перехода по якорю.
Приведу пример кода на JavaScript, который вы можете использовать для этой цели:
window.addEventListener('hashchange', function() { var element = document.getElementById(location.hash.substring(1)); if (element) { var headerHeight = document.querySelector('header').offsetHeight; window.scrollTo(0, element.offsetTop - headerHeight); } });
В этом коде мы добавляем слушатель события hashchange, который срабатывает каждый раз, когда меняется якорь в URL. Затем мы находим элемент на странице по id, который соответствует якорю, и вычисляем его позицию относительно верхней части страницы. Далее мы учитываем высоту вашей фиксированной шапки и скроллируем страницу к нужному элементу с учетом этой коррекции.
Таким образом, после применения этого скрипта, пользователи смогут корректно переходить к элементам страницы, даже если у них есть фиксированная шапка.