Якорная ссылка 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 return 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 не изменится, так как возвращение ложным будет отменить событие. Поэтому, так как вы хотите, чтобы URL-адрес действительно изменился, вы можете установить переменную window.location.hash в значение, которое вы хотите (это единственное свойство URL-адреса, которое вы можете изменить без браузера, заставляющего перезагружать). Вероятно, вы можете присоединить обработчик событий и вызвать что-то вроде window.location.hash = this.id, хотя я не уверен, как mootools обрабатывает события.

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

Answer 3

Простым способом, вероятно, будет добавить его в качестве ГЕТ. То есть, http://example.com/foo.php?q=#button1 вместо http://example.com/foo.php#button1

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

Answer 4

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

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

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

Также preventDefault

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

Answer 7

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

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

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

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