하나의 페이지에 2 개의 스크립트가 있습니다

Question

2 개의 스크립트가 있습니다 1 개의 스크립트는 탐색 바용이고 다른 하나는 수직 스크롤을위한 것이지만 문제는 수직 스크롤링 스크립트를 삽입 할 때 nav bar 용 스크립트가 작동하지 않는다는 것입니다.

동시에 2 개의 스크립트를 작성하는 방법을 아는 사람이 있습니까?

탐색 모음 스크립트 :

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script> 
<!--[if IE]> 
<style type="text/css">.jimgMenu {position:relative;width:630px;height:200px;overflow:hidden;margin-left:20px;}</style> 
<![endif]--> 
<script type="text/javascript"> 
$(document).ready(function() { 

    // find the elements to be eased and hook the hover event 
    $('div.jimgMenu ul li a').hover(function() { 

     // if the element is currently being animated (to a easeOut)... 
     if ($(this).is(':animated')) { 
      $(this).stop().animate({ 
       width: "310px" 
      }, { 
       duration: 450, 
       easing: "easeOutQuad" 
      }); 
     } else { 
      // ease in quickly 
      $(this).stop().animate({ 
       width: "310px" 
      }, { 
       duration: 400, 
       easing: "easeOutQuad" 
      }); 
     } 
    }, function() { 
     // on hovering out, ease the element out 
     if ($(this).is(':animated')) { 
      $(this).stop().animate({ 
       width: "78px" 
      }, { 
       duration: 400, 
       easing: "easeInOutQuad" 
      }) 
     } else { 
      // ease out slowly 
      $(this).stop('animated:').animate({ 
       width: "78px" 
      }, { 
       duration: 450, 
       easing: "easeInOutQuad" 
      }); 
     } 
    }); 
}); 
</script> 

vertival 스크립트

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".contactLink").click(function() { 
     if ($("#contactForm").is(":hidden")) { 
      $("#contactForm").slideDown("slow"); 
     } else { 
      $("#contactForm").slideUp("slow"); 
     } 
    }); 
}); 

function closeForm() { 
    $("#messageSent").show("slow"); 
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000); 
} 

$(document).ready(function() { 
    function filterPath(string) { 
     return string.replace(/^\//, '') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/, '') 
      .replace(/\/$/, ''); 
    } 
    $('a[href*=#]').each(function() { 
     if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) { 
      var $targetId = $(this.hash), 
       $targetAnchor = $('[name=' + this.hash.slice(1) + ']'); 
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
      if ($target) { 
       var targetOffset = $target.offset().top; 
       $(this).click(function() { 
        $('html, body').animate({ 
         scrollTop: targetOffset 
        }, 1000); 
        var d = document.createElement("div"); 
        d.style.height = "101%"; 
        d.style.overflow = "hidden"; 
        document.body.appendChild(d); 
        window.scrollTo(0, scrollToM); 
        setTimeout(function() { 
         d.parentNode.removeChild(d); 
        }, 10); 
        return false; 
       }); 
      } 
     } 
    }); 
}); 
</script> 

추신 : 내 탐색 모음이

Answer 1

두 번째 스크립트가 일부 기능을 overwritting되어 고정/첫 번째 스크립트의 값. 이것이 스크립트가 함께 작동하지 않는 이유입니다.

1. 디버거가 어떤 부분에서 작동하는지 그리고 어디에서 스크립트가 실패하는지 확인하십시오.
2. 예를 들어 모든 데이터와 함수를 "클래스"에 포함시키는 등 충돌을 생성하지 않는 코드를 작성하십시오.
3. 예를 들어, 부모 요소 (window.scrollTo) 사용을 피하는 등 자신의 작업을 수행 할 html 요소 만 필요한 코드를 작성하십시오.