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

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

24 голосов
/ 02 августа 2009

У меня есть различные ссылки, которые имеют уникальные идентификаторы, которые являются «псевдо-якорями». Я хочу, чтобы они влияли на значение хеша 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.

Ответы [ 7 ]

34 голосов
/ 02 августа 2009

Цель анкорной ссылки - прокрутить страницу до определенной точки.Поэтому, если вы не хотите, чтобы это происходило, вам нужно присоединить обработчик 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 обрабатывает события.

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

22 голосов
/ 04 апреля 2013

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

<a href="javascript:void(0);">linktxt</a>
9 голосов
/ 02 августа 2009

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

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

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

3 голосов
/ 06 декабря 2013

Также preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }
3 голосов
/ 25 июня 2013

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

1 голос
/ 02 августа 2009

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

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

0 голосов
/ 21 марта 2017

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

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

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

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

...