Как остановить # ссылки, которые вызывают функции javascript, от перехода к началу страницы

Ответ 1

Много раз вы увидите, что люди используют атрибут onclick и просто return false в конце его. Хотя это работает надежно, оно немного уродливо и может затруднить управление вашей базой кода.

<a href="#" onClick="submitComment(); return false;">

Отделите свой HTML-код от своего JavaScript

Это намного лучше для вас и вашего проекта, если вы отделите свою разметку от своих скриптов.

<a id="submit" href="enableScripts.html">Post Comment</a>

С помощью вышеуказанного HTML мы можем найти этот элемент и связать обработчик, когда пользователь нажимает на элемент. Мы можем сделать все это из внешнего .js файла, чтобы наш HTML-код оставался красивым и чистым, без каких-либо скриптов:

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
    document.attachEvent("onreadystatechange", setup);
} else {
    document.onload = setup;
}

function setup () {
    var submit, submitComment;
    submit = document.getElementById("submit");
    submitComment = function (e) {
        e = e || window.event;
        e.preventDefault();
        alert("You clicked the link!");
    };
    if (submit.addEventListener) {
        submit.addEventListener("click", submitComment, false);
    } else if (submit.attachEvent) {
        submit.attachEvent("onclick", submitComment);
    } else {
        submit["onclick"] = submitComment;
    }
}

В приведенном выше коде много чего происходит, но пусть пробегает по нему от 30 000 футов. Мы начнем с выяснения того, как наилучшим образом настроить наш код, когда браузер загружает страницу вверх. В идеале мы хотели бы сделать это, когда DOM будет готов.

После нескольких условных проверок нам удается поручить браузеру выполнять нашу функцию после подготовки DOM (таким образом, наш якорный элемент существует для взаимодействия с его поведением).

Наша функция установки получает ссылку на этот якорь, создает функцию, которую мы будем запускать при нажатии на привязку, а затем находит способ привязать вызов этой функции к событию щелчка якоря - потеряв ваш разум еще? Это безумие, с которыми разработчикам JavaScript приходилось иметь дело в течение некоторого времени.

С jQuery это намного проще

Возможно, вы слышали о jQuery и задавались вопросом, почему он так популярен. Позвольте решить ту же проблему, но на этот раз с jQuery, а не с сырым ванильным JavaScript. Предполагая следующую разметку:

<a id="submit" href="enableScripts.html">Post Comment</a>

Единственный JavaScript, который нам нужен (благодаря jQuery), таков:

$(function(){
    $("#submit").on("click", function(event){
        event.preventDefault();
        submitComment();
    });
});

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

Ответ 2

Добавить возврат false. Я верю, что без этого страница перезагрузится.

<a href="#" onClick="submitComment(); return false;">

Ответ 3

Просто верните false onClick of Hyperlink

Его не будет прокручивать страницу вверх, т.е. она будет еще там, где она находится

Ответ 4

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

Попробуйте использовать <a id="stay-put">Submit Comment</a>

Тогда ваш javascript будет выглядеть так:

$("#stay-put").click(function(){
    submitComment();
});

Ответ 5

Попробуйте использовать:

<a href="#a" onclick="myFunction()">Javascript is sweet!</a>

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

Ответ 6

Другим простым способом является

<a href="javascript: void(0)" class="action-class">Link</a>

Тогда у вас может быть отдельный код с событием onClick для класса "action-class" с любой структурой, которая вам нравится, или простым JavaScript.

Ответ 7

Вместо этого вы можете использовать этот альтернативный синтаксис:

<a href="javascript:submitComment()">