javascript - 页内 anchor 链接的两个脚本之间的冲突

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 中的每一项都是指向页面相关部分的 anchor 链接。

例子:

目录

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

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