Як запобігти переходу на верхню сторінку клацання посилання "#"?

Наразі я використовую <a>теги з jQuery для ініціювання таких речей, як події клацання тощо.

Приклад є <a href="#" class="someclass">Text</a>

Але я ненавиджу, як "#" змушує сторінку переходити на верхню частину сторінки. Що я можу зробити замість цього?

У jQuery, коли ви обробляєте подію натискання, повернути помилкове, щоб зупинити відповідь на звичайний спосібне дозволяти виконувати дію за замовчуванням, який повинен відвідувати hrefатрибут (за коментарем PoweRoy та відповіддю Еріка ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Це старе, але ... про всяк випадок, коли хтось знайде це в пошуку.

Просто використовуйте "#/"замість, "#"і сторінка не перескакує.

Ви можете навіть написати це саме так:

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

я не впевнений, що це кращий шлях, але це спосіб :)

Рішення №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>

Ви можете використовувати, event.preventDefault()щоб цього уникнути. Детальніше читайте тут: http://api.jquery.com/event.preventDefault/ .

Просто використовуйте <input type="button" />замість цього <a>і використовуйте CSS, щоб мати стиль, щоб він виглядав як посилання, якщо хочете.

Кнопки створені спеціально для натискання, і їм не потрібні атрибути href.

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

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

Якщо ви хочете використовувати якір, ви можете використовувати http://api.jquery.com/event.preventDefault/, як інші запропоновані відповіді.

Ви також можете використовувати будь-який інший елемент, наприклад, проміжок часу, і до нього долучити подію натискання.

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

Ви можете використовувати #0як href, оскільки 0це не дозволено як ідентифікатор, сторінка не перескакує.

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

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

Просто використовуйте

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

ПІДТРИМКА

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

Якщо елемент не має значущого значення href, то він насправді не є посиланням, так чому б замість цього не використовувати якийсь інший елемент?

Як запропонував Neothor, проміжок настільки ж підходить і, якщо його правильно викладати, буде помітно очевидним як предмет, на який можна натиснути. Ви навіть можете прикріпити подію наведення курсору, щоб елемент "загорівся", коли миша користувача переміщається по ньому.

Однак, сказавши це, ви, можливо, захочете переосмислити дизайн вашого веб-сайту, щоб він функціонував без javascript, але покращився javascript, коли він доступний.

Посилання з href = "#" майже завжди повинні бути замінені елементом кнопки:

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

Використання посилань з href = "#" також є проблемою доступності, оскільки ці посилання будуть видимі читачам екрану, який прочитає "Посилання - текст", але якщо користувач натисне, він нікуди не піде.

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

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

Я використав:

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

#/Трюк працює, але додає подія історії в браузері. Отже, натискання назад не працює, як користувач може захотіти / очікувати цього.

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

Зокрема, мені потрібно було це зробити в спадному меню завантажувальної програми всередині .btn-group(Довідник) , тому я зробив:

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

Таким чином воно було націлене і не впливало на щось інше на сторінці.

Я завжди використовував:

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

при спробі запобігти перескоку сторінки. Не впевнений, чи це найкраще, але, здається, він працював добре роками.

Існує 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()якщо ви передаєте подію натискання в jQuery.

Ви також можете повернути помилкові після обробки вашого 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/

Якщо ви хочете перейти на якірний розділ на тій же самій сторінці, не скочуючи сторінку, скористайтеся:

Просто використовуйте "# /" замість "#", наприклад

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

Додавання чогось після #встановлює фокус сторінки до елемента з цим ідентифікатором. Найпростішим рішенням є використання, #/навіть якщо ви використовуєте jQuery. Однак якщо ви обробляєте подію в jQuery, event.preventDefault()це шлях.

<a href="#!">Link</a>І <a href="#/">Link</a>не працює , якщо один повинен натиснути на той же вхід більш ніж один раз .. вона приймає тільки в 1 клік подій для кожного на кілька входів.

все-таки найкращий шлях - це с <a href="#">Link</a>

тоді,

event.preventDefault();