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#button1

У кого-нибудь есть идеи для этого? Просто наличие некоторого возврата 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 и вернуть false. Даже простое добавление его в качестве атрибута должно работать:

<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

Я нашел решение. Здесь я спасаю старое место от вызова 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 5

Кроме того, preventDefault

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

Answer 6

Более простой способ - добавить GET. То есть http://example.com/foo.php?q=#button1 вместо http://example.com/foo.php#button1

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

Answer 7

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

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

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

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