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

Много раз вы увидите, что люди используют атрибут onclick и просто возвращает 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 обрабатывает все тесты, чтобы определить, с учетом вашего браузера, что лучше всего сделать то или то . Он берет все сложные вещи и убирает их с пути, чтобы вы могли быть свободны для творчества.