Javascript 页内定位链接的两个脚本之间存在冲突

我有两个小脚本，单独工作时没有问题

但是，当它们同时出现在同一文档中时，无法正常工作

脚本#1：启动模式对话框

我的网站上的所有页面都有指向以下功能的链接：

• 登录页面
• 联系页面
• 电子邮件注册

当用户单击其中一个链接时，会出现一个灯箱，相关的模式会滑入

为了防止lightbox处于活动状态时页面在后台滚动，我使用了以下脚本：

$(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;
}

据我所知，这个函数工作得很好

脚本#2：平滑滚动

我有几个内容很长的网页（例如，服务条款、隐私政策等）

为了使这些页面更加用户友好，我在顶部添加了一个目录。TOC中的每个项目都是指向页面上相关部分的锚定链接

例如：

TOC

就像脚本1一样，这似乎工作得很完美

但是，当两个脚本同时出现在页面上时，任何操作都无法正常进行。

没有控制台错误。主要问题是模式脚本激活CSS（滚动条消失），但不启动lightbox

---

这两个脚本如何协同工作？

这样就可以了。然而，我盲目地编码它。如果它不起作用，我可以在实例上测试它，看看它失败的地方。不过，这应该行得通。它所做的很简单：若按下任何一个按钮，它都会跳过平滑的滚动：（

#contact

，

#email

，

#login

或

#close

）

$（文档）.ready（函数（）{
$（“[href$=”#联系人“]，[href$=”#电子邮件“]，[href$=”#登录“]）。单击（函数（）{
$（“body”）.addClass（“noscroll”）；
});
$（“a[href$='#close']）。单击（函数（）{
$（“body”）.removeClass（“noscroll”）；
});    
$（'a[href*=“\\\\\\”]”）。在（'click'，函数（事件）{
var href=$（event.target）.closest（'a'）.attr（'href'），
例外情况=['#联系人'、'#电子邮件'、'#登录'、'#关闭']，
跳过=错误；
对于（i=0；i-1）{
跳过=真；
}
}
如果（！跳过）{
event.preventDefault（）；
$（'html，body'）.animate（{scrollTop:$（this.hash.offset（）.top}，500）；
}
});
});

---

注意。上面的脚本组合了您在问题中显示的两个脚本，应该同时替换这两个脚本。

第二个脚本的选择器上的“\\”是什么？话虽如此，我认为这不是问题所在

就我所见，第一个脚本是通过他们的HREF选择链接，从一个破折号字符开始，然后是四个不同的单词

第二个脚本还选择在其HREF中包含破折号字符的链接

通常将多个处理程序连接到同一事件的元素不应冲突，并且它们都会运行。但第二个脚本也使用以下命令停止事件处理：event.preventDefault（）

我假设这是有意的，所以在附加事件处理程序之前，您需要更具体地选择HTML元素，以防止不必要的行为。例如，您可以将第二个脚本修改为：

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

---

这一切看起来都很简单。一个元素可以有许多单击事件监听器，第一个监听器只是切换一个类。你能在演示中复制吗？没有显示lightbox或modal relatedLaunch从何处开始？通过什么机制？这是我的观点。没有显示任何关系。@charlietfl整个lightbox和modal功能都是CSS，除了问题中发布的JS。这就是为什么我认为模式脚本和平滑滚动脚本中的锚定选择器之间存在冲突。“jQuery选择器中的特殊字符转义在属性字符串中不是真的需要吗？我很高兴能帮你回来，@Michael_B.Hi Andrei，你大约一年前为我调整了一个代码块。它工作得很好。再次感谢。我有两个小问题与这些相同的链接。如果你有机会，请看一看。我已经在我问题的底部列出了问题：@Michael，我不确定我是否理解预期的行为。在这个问题的背景下，“完全没有反应”是什么意思？你能把现场的东西联系起来吗？还有：您是否可以添加一个特定的类，甚至一个属性（比如rel=“lightbox（或modal？）”到应该防止默认的链接，并让其余的转到它们的目标？这样我们就不需要猜测我们正在处理的情况。模态链接打开模态，其他一切都有正常的链接行为。您上面编写的代码工作正常。所有模态都工作正常。我唯一的问题是页面链接，我认为问题是这个JS。为什么片段标识符不出现在地址栏中？为什么在另一个页面中带有片段标识符的链接不起作用？这就是两个问题。我在我引用的问题中添加了更多的细节（见下半部分）。

<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);
});

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