Question

我有两个互相冲突的javascript文件。一种是打开模态并使用<a href="#modal" data-toggle="modal">open modal</a>之类的链接，然后使用id="modal"打开模态。但另一个脚本用于平滑滚动，它从网址(I'd like to keep that part!)中删除锚点，但在添加平滑滚动脚本后，模态不起作用。我有什么想法可以解决它吗？

modal.js：

$(".modal-wide").on("show.modal", function() {

  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});
$('a[data-toggle="modal"]').bind('click',function(){
  $('.modal').modal('hide');
});

scroll.js：

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});

scroll.js来源：https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 1

尝试将特定的href标签添加到非选择器的平滑滚动功能。

$('a[href*="#"]:not([href="#"]):not([href="#modal"])').click(function()

这是一个小提琴，显示smoothscroll仅适用于平滑滚动div，它应该保留你的模态功能。

https://jsfiddle.net/bryangators/wjgu1vL9/

分离javascript函数的最佳方法是什么？

1 个答案: