页内锚链接的两个脚本之间的冲突
我有两个小脚本，当单独工作时，没有问题。
然而，当它们一起出现在同一个文档中时，它们无法正常工作。
脚本#1:启动模式对话框
我网站上的所有页面都有指向以下功能的链接：
- 登录页
- 联系人页
- 电子邮件注册
当用户单击其中一个链接时，就会出现一个lightbox，相应的模式也会滑入其中。
为了防止在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中的每一项都是指向页面相关部分的锚链接。
示例：
目录
<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 (滚动条消失)，但没有启动lightbox。
这两个脚本是如何一起工作的？
回答 2
Stack Overflow用户
发布于 2017-02-11 22:58:31
这样就行了。然而，我盲目地编码它。如果它不能工作，我可以使用测试它在现场的例子，看看它在哪里失败。不过，应该管用的。它所做的很简单:如果其中任何一个已经按下，它就跳过平滑滚动：(#contact、#email、#login或#close)。
$(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);
}
});
});上面的脚本结合了您在问题中显示的两个脚本，应该替换这两个脚本。
Stack Overflow用户
发布于 2017-02-11 23:06:11
第二个脚本的选择器上的“\”是什么？话虽如此，我不认为这是问题所在。
据我所见，第一个脚本是根据它们的引用选择链接，从一个破折号字符开始，然后跟着四个不同的单词。
第二个脚本还选择链接，在它们的参考文件中包含一个破折号字符。
通常，将多个处理程序附加到一个元素时，相同的事件不应该冲突，并且它们都会运行。但是第二个脚本也用:event.preventDefault()停止事件处理；
我假设这是有意的，所以在附加事件处理程序之前，您需要更具体地选择HTML元素，以防止不必要的行为。例如，您可以将第二个脚本修改为：
$("[href$='#copyrights'],[href$='#trademarks'],[href$='#indemnification']").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});https://stackoverflow.com/questions/42182130
复制相似问题
腾讯云开发者
