Как обновить страницу и загрузить ее сверху после нажатия на привязку, игнорируя привязку и возвращаясь к началу?

Question

У меня есть страница с несколькими якорями.Когда пользователь щелкает привязку, привязки работают, и пользователь переносится в правильное местоположение.

Если пользователь пытается обновить страницу, он сохраняет идентификатор привязки в окне URL-адреса и, естественно, при обновлении, это не возвращает к началу страницы.

Я думаю, что было бы более удобно возвращаться к началу страницы при обновлении.

Как бы мне этого добиться?

Моя страница в настоящее время в основном использует bootstrap, css, jquery, javascript и php.

Я думаю, мне нужно настроить некоторый кодтак что после щелчка якоря он удаляет якорь из окна URL, так что, если кто-то обновится, он обновит только начальное состояние страницы без якоря, но я не знаю, как начать.Или, может быть, я слишком много думаю об этом, и есть какой-то способ всегда переходить к началу страницы при обновлении, независимо от якоря или нет.Я не слишком разбираюсь в коде.

Прямо сейчас мой код выглядит следующим образом ...

Пример одного из моих якорей:

<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>

Один из элементов, например, что якорь будет прыгатьto:

<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;">&nbsp;</p></div>

Стиль CSS на моих привязках:

.anchor:target { height:200px; display: block; margin-top:-2em; visibility: hidden;}

Фактические результаты с моим кодом: обновление страницы остается в месте привязки

Желаемые результаты: обновление страницы продолжаетсяНаверх страницы

---

После некоторых поисков я нашел решение, которое почти работает для меня:

<script>
window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
</script>

Но оно создает эффект мерцания, который выглядит не лучшим образом.как пример моего сайта на

https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html

Кто-нибудь знает, как убрать "мерцание"?

Answer 1

Переход к содержимому страницы с использованием Фрагменты URL (#someLink) в тегах привязки является основной частью спецификации HTML . Стандартная реализация в большинстве (если не во всех) веб-браузерах заключается в добавлении фрагмента в адресную строку. Фрагмент является частью URL и, следовательно, при обновлении страницы браузер прокручивает до элемента с этим идентификатором. Большинство пользователей знакомы с этим поведением, даже если они не понимают, как и почему оно работает таким образом. По этой причине я бы рекомендовал не обходить это поведение.

Однако, если это абсолютно необходимо, единственный способ достичь желаемого результата - не использовать фрагменты URL для навигации и использовать вместо этого JavaScript, поэтому не помещайте фрагмент в URL во-первых. Похоже, что метод Element.scrollIntoView() может сделать то, что вы ищете. Вместо того, чтобы иметь <a href="#element1">Click me</a> вы бы использовали <a onclick="document.getElementById('element1').scrollIntoView();">Click me</a> или даже лучше, реализуйте это во внешнем файле JS. Если у вас возникли проблемы из-за того, что элемент не имеет атрибута href, вы всегда можете добавить пустой фрагмент href="#".

Answer 2

Вы можете попробовать это (с .some-anchor - это класс для всех тегов, которые указывают на некоторые пункты назначения на странице).

$('.some-anchor').click(function() {
    var target = $(this).attr("href");
    $('html, body').animate({
        scrollTop: $("" + target).offset().top
    }, 1000);
    return false;
  });

«return false;»или метод события protectDefault () предотвратит мерцание страницы.Как я заметил, это не делает # для URL, поэтому обновление не является проблемой.

Другой полезный ответ: jQuery мерцание при использовании animate-scrollTo