Конфликт между двумя скриптами для ссылок привязки на странице

Question

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

Однако, если они появляются вместе в одном документе, они не работают должным образом.

Script # 1: Запуск модального диалогового окна

Все страницы на моем сайте есть ссылки на следующие функции:

• Войти Страница
• Контакт Page
• E- почта Регистрация

Когда пользователь нажимает на одну из этих ссылок, лайтбокс появляется и соответствующие модальные горки в

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

$(document).ready(function(){ 
    $("[href$='#contact'],[href$='#email'],[href$='#login']").click(function(){ 
     $("body").addClass("noscroll"); 
    }); 
    $("a[href$='#close']").click(function(){ 
     $("body").removeClass("noscroll"); 
    });  
}); 

CSS-просто:

.noscroll { 
    overflow: hidden; 
} 

Эта функция отлично работает, насколько я могу судить.

Script # 2: Smooth Scrolling

У меня есть несколько веб-страниц с длительным содержанием (например, условия предоставления услуг, Политика конфиденциальности и т.д.)

Для того, чтобы эти страницы более удобной Я добавил оглавление сверху. Каждый элемент в TOC является привязкой, ведущей к соответствующему разделу на странице.

Пример:

ТОС

<ol> 
    <li><a href="terms-of-service/#copyrights">Copyrights</a></li> 
    <li><a href="terms-of-service/#trademarks">Trademarks</a></li> 
    <li><a href="terms-of-service/#indemnification">Indemnification</a></li> 
</ol> 

Содержимое

<h3 id="trademarks">Trademarks</h3> 
    <p> text text text </p> 

Стандартное поведение для в-странице ссылок является непосредственным переход к содержанию. Для более элегантного опыта я добавил плавный эффект прокрутки:

$('a[href*="\\#"]').on('click', function(event){  
    event.preventDefault(); 
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
}); 

Как и скрипт # 1, это работает отлично.

Однако, когда оба сценария появляются вместе на странице, ничего не работает должным образом.

Ошибок в консоли нет. Основная проблема заключается в том, что модальный скрипт активирует CSS (полоса прокрутки исчезает), но не запускает лайтбокс.

Как обе эти скрипты могут работать вместе?

Answer 1

Это должно быть сделано. Тем не менее, я закодировал его вслепую. Если это не сработает, я могу использовать его тестирование на живом примере, чтобы увидеть, где он не работает. Однако это должно сработать. Это просто: он пропускает плавную прокрутку, если какое-либо из них было нажато: (#contact, #email, #login или).

$(document).ready(function(){ 
    $("[href$='#contact'],[href$='#email'],[href$='#login']").click(function(){ 
    $("body").addClass("noscroll"); 
    }); 
    $("a[href$='#close']").click(function(){ 
    $("body").removeClass("noscroll"); 
    });  
    $('a[href*="\\#"]').on('click', function(event){ 
    var href = $(event.target).closest('a').attr('href'), 
     exceptions = ['#contact', '#email', '#login', '#close'], 
     skip = false; 
    for (i = 0; i < exceptions.length; i++) { 
     if (href.indexOf(exceptions[i]) > -1) { 
     skip = true; 
     } 
    } 
    if (!skip) { 
     event.preventDefault(); 
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
    } 
    }); 
}); 

Примечание. Вышеупомянутый скрипт объединяет два сценария, которые вы указали в своем вопросе, и должны заменить оба.

Answer 2

Что делает «\\» на селекторе второго скрипта? Сказав это, я не думаю, что это проблема.

Насколько я вижу, первый скрипт выбирает ссылки по своим hrefs, начиная с символа тире и следующих четырех разных слов.

Второй скрипт также выбирает ссылки, содержащие символ штрихов в их hrefs.

Обычно прикрепленный множественный обработчик к элементам одного и того же события не должен конфликтовать, и все они запускаются. Но второй скрипт также останавливает обработку событий с помощью: event.preventDefault();

Я предполагаю, что это предназначено, поэтому вам нужно быть более конкретным при выборе элементов HTML, прежде чем присоединять обработчики событий для предотвращения нежелательного поведения. Например, вы можете изменить свой второй скрипт следующим образом:

$("[href$='#copyrights'],[href$='#trademarks'],[href$='#indemnification']").click(function(event){ 
    event.preventDefault(); 
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); 
});