HTML-якорная ссылка без прокрутки или перехода

Question

У меня есть различные ссылки, которые имеют уникальные идентификаторы, которые являются "псевдо-якорями". Я хочу, чтобы они влияли на значение хеша URL, и магия кликов обрабатывается некоторым кодом mootools. Однако, когда я нажимаю на ссылки, они прокручиваются к себе (или к вершине в одном случае). Я не хочу никуда прокручиваться, но мне также нужен мой javascript для выполнения и получения значения хеша в обновлении URL.

Пример смоделированного кода:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Так что, если вы нажмете ссылку "кнопка 1", URL-адрес может быть http://example.com/foo.php

У кого-нибудь есть идеи по этому поводу? Просто наличие некоторого возврата javascript void убивает прокрутку, но также убивает мой javascript (хотя я мог бы, вероятно, обойти это с помощью onclick), но, что более важно, предотвращает изменение значения хеша в URL.

Answer 1

Я, наверное, что-то упускаю, но почему бы просто не дать им разные идентификаторы?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

Или какое-нибудь соглашение вы бы предпочли.

Answer 2

Суть якорной ссылки заключается в том, чтобы прокрутить страницу до определенной точки. Так что, если вы не хотите, чтобы это произошло, вам нужно приложить onclick обработчик и вернуть ложь. Даже простое добавление его в качестве атрибута должно работать:

<a href="#button1" id="button1" onclick="return false">button 1</a>

Побочным эффектом вышеизложенного является то, что сам URL не изменится, так как возвращение false приведет к отмене события. Таким образом, так как вы хотите, чтобы URL действительно изменился, вы можете установить window.location.hash переменная к значению, которое вы хотите (это единственное свойство URL, которое вы можете изменить без принудительной перезагрузки браузера). Вы можете прикрепить обработчик события и вызвать что-то вроде window.location.hash = this.id хотя я не уверен, как mootools обрабатывает события.

(Также вам нужно, чтобы все идентификаторы были уникальными)

Answer 3

Вы можете использовать код ниже, чтобы избежать прокрутки:

<a href="javascript:void(0);">linktxt</a>

Answer 4

Также, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 5

Я нашел решение. Здесь я спасаю старое место от вызова href и восстанавливаю его после прокрутки

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

и в теле страницы

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Благодаря sitepoint

Answer 6

Возможно, более простым способом было бы добавить его как GET. То есть, http://example.com/foo.php?q=#button1 вместо http://example.com/foo.php#button1

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

Answer 7

Ну вот, через 7 лет после того, как этот ответ был опубликован, я нашел другой способ заставить его работать: просто укажите window.location.hash на несуществующий якорь! Это не работает для <a>с, но прекрасно работает в <div>s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Хорошо работал в Chrome 56, Firefox 52 и Edge (IE?) 38. Еще одним хорошим моментом является то, что это не приводит к ошибкам или предупреждениям консоли.

Надеюсь, это поможет кому-то, кроме меня.

Answer 8

Есть решение вообще без JavaScript:

      <a href="#!">I will not jump to the top</a>

Answer 9

Использовать

      <a href="#button1" id="button1" onclick="setHash(this.id)">button 1</a>

где

      function setHash(hash) {
            event.preventDefault();        
            history.pushState(null, null, "#"+hash);
}

event.preventDefault()останавливает браузер от того, что он обычно делает при нажатии, и history.pushStateдобавляет в стек истории сессий.

Для дальнейшего обсуждения см. здесь и здесь