Как предотвратить переход по ссылке " # " в верхнюю часть страницы?

Так это старый, но... на всякий случай, если кто-то найдет это в поиске.

просто использовать "#/" вместо "#" и страница не будет прыгать.

вы даже можете написать это так:

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

Я не уверен, что лучший способ, но это способ :)

можно использовать event.preventDefault() чтобы избежать этого. Подробнее здесь: http://api.jquery.com/event.preventDefault/.

Решение #1: (равнина)

<a href="#!" class="someclass">Text</a>

---

решение #2: (требуется javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

---

решение #3: (требуется jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

просто использовать <input type="button" /> вместо <a> и использовать CSS, чтобы стиль его, чтобы выглядеть как ссылка, Если вы хотите.

кнопки сделаны специально для нажатия, и им не нужны никакие атрибуты href.

лучший способ-использовать действие onload для создания кнопки и добавления ее туда, где вам нужно с помощью javascript, поэтому с отключенным javascript они не будут отображаться вообще и не смущают пользователя.

при использовании href="#" вы получаете тонны различных ссылок, указывающих на же месте, которая не будет работать, когда агент не поддерживает JavaScript.

Если вы хотите использовать якорь, вы можете использовать http://api.jquery.com/event.preventDefault/ как и другие предложенные ответы.

вы также можете использовать любой другой элемент, например span, и прикрепить к нему событие click.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

можно использовать #0 как близко, поскольку 0 не допускается в качестве идентификатора, страница не будет прыгать.

<a href="#0" class="someclass">Text</a>

просто использовать

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Если элемент не имеет значимого значения href, то это не совсем ссылка, так почему бы не использовать какой-то другой элемент вместо этого?

Как предложил Neothor, промежуток так же уместен и, если он правильно оформлен, будет заметно очевиден как элемент, который можно щелкнуть. Вы даже можете прикрепить событие наведения, чтобы элемент "загорелся", когда мышь пользователя перемещается по нему.

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

вы можете просто передать тег привязки Без свойства href и использовать jQuery для выполнения необходимого действия:

<a class="foo">bar</a>

ссылки с href= " # " почти всегда должны быть заменены элементом button:

<button class="someclass">Text</button>

использование ссылок с href= " # "также является проблемой доступности, поскольку эти ссылки будут видны читателям экрана, которые будут считывать" текст ссылки", но если пользователь нажимает на него, он никуда не денется.

я использовал:

<a href="javascript://nop/" class="someClass">Text</a>

Если вы хотите перейти в раздел привязки на той же странице без скачка страницы, Используйте:

просто используйте "#/" вместо "#" е.г

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Я всегда использовал:

<a href="#?">Some text</a>

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

вы также можете вернуть false после обработки вашего jquery.

например.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Я использую что-то вроде этого:

<a href="#null" class="someclass">Text</a>

чтобы страница не прыгала, вам нужно позвонить e.stopPropagation(); после вызова e.preventDefault();:

stopPropagation предотвращает событие от перехода вверх по дереву DOM. Более подробная информация здесь:https://api.jquery.com/event.stoppropagation/

The #/ трюк работает, но добавляет событие в истории к браузеру. Таким образом, нажатие назад не работает так, как пользователь может этого хотеть/ожидать.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); это то, как я пошел, так как он работает для уже существующего контента и любых элементов, добавленных в DOM после загрузки.

в частности, мне нужно было сделать это в раскрывающемся меню bootstrap внутри .btn-group(ссылка), так я и сделал:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

таким образом, он был мишенью, и не повлиять на что-нибудь еще на странице.

есть 4 подобных способа, чтобы предотвратить страницу от прыжка на вершину без каких-либо JavaScript:

Вариант 1:

<a href="#0">Link</a>

Вариант 2:

<a href="#!">Link</a>

Вариант 3:

<a href="#/">Link</a>

4 (не рекомендуется):

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

но лучше использовать event.preventDefault() если вы передаете событие click в jQuery.

добавление чего-то после # устанавливает фокус страницы на элемент с этим идентификатором. Самое простое решение-использовать #/ даже если вы используете jQuery. Однако если вы обрабатываете событие в jQuery,event.preventDefault() - это путь.