Was ist der beste Weg, um JavaScript-Funktionen zu trennen?

Question

Ich habe zwei Javascript-Dateien, die miteinander in Konflikt geraten. Eine besteht darin, Modale zu öffnen und Links wie <a href="#modal" data-toggle="modal">open modal</a> zu verwenden und dann das Modal mit id="modal" zu öffnen. Aber das andere Skript ist für reibungslose Scroll und es entfernt den Anker von der URL (I'd like to keep that part!) aber nach dem Hinzufügen der glatten Scroll-Skript, funktionieren die Modale nicht. irgendwelche Ideen, wie ich es beheben kann?

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 Quelle: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 1

Versuchen Sie, Ihre spezifischen href-Tags an den nicht-Wähler die die glatte Scroll-Zugabe Funktion.

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

Hier ist eine Geige zeigt die Smooth nur für den reibungslosen Scroll div arbeitet, die Ihre modal Funktionalität bewahren sollte.

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