Question

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

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

脚本＃1：启动模态对话框

我网站上的所有网页都包含以下功能的链接：

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

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

为了防止在灯箱处于活动状态时页面在后台滚动，我有这个脚本：

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

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

注意。上面的脚本结合了您在问题中显示的两个脚本，并且应该替换它们。

Answer 2

＆＃39; \\＆＃39;在第二个脚本的选择器？说完这个，我不认为这是问题所在。

据我所知，第一个脚本是通过他们的hrefs选择链接，以短划线字符开头并跟随四个不同的单词。

第二个脚本还会在其href中选择包含短划线字符的链接。

通常将多个处理程序附加到元素相同的事件不应该冲突，它们都会运行。但是第二个脚本还使用以下命令停止事件处理：event.preventDefault（）;

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

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

用于页内锚链接的两个脚本之间的冲突

2 个答案: