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

У меня есть разные ссылки, у которых есть уникальный идентификатор, который является "псевдо-якорями". Я хочу, чтобы они влияли на значение хеша 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 return void убивает прокрутку, но также убивает мой javascript (хотя я мог бы, вероятно, обойти это с помощью onclick), но что более важно, предотвращает изменение хэш-значения в URL-адресе.

Ответ 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>

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

Ответ 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 обрабатывает события.

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

Ответ 3

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

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

Ответ 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

Ответ 5

Кроме того, preventDefault

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

Ответ 6

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

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

Ответ 7

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

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

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

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