Problème entre appel de Javascript

Bonjour,
alors voilà le petit problème que j'ai, je réalise un site en html et javascript. Je souhaite faire deux chose :
-Faire un fancybox
-Et faire un défilement fluide d'ancre lorsqu'on clic sur un lien du menu.
J'ai réussi a faire le code pour les deux, mais le problème c'est que j'arrive pas utiliser ces deux fonction en même temps. C'est a dire que si je mets les deux code il y a que le fancybox qui fonctionne mais si j’enlève le fancybox la fonction du menu défilement fluide fonctionne parfaitement.


voici les bibliothéque j'appel :

[code=javascript]
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

[/code]

Voici les code que j'utilise :

[code=javascript]
<!-- fancybox -->
<script type="text/javascript">
		$(document).ready(function() {
$("a#si").fancybox({
	'type'				:'image',
	'overlayColor'			:'#D3D3D3',
	'hideOnContentClick'		: true,
	'transitionIn'			:'elastic',
	'transitionOut'			:'elastic',
	'overlayOpacity'		: 0.7,
	'speedIn'			:600, 
	'speedOut'			:200, 
	'titleShow'			:true,
	'titlePosition'			:'inside'
	});		
		});
	</script>

<!--défilement fluid du menu scroll -->
<script type="text/javascript">
	$(document).ready(function() {
		$('.js-scrollTo').on('onclick', function() { // Au clic sur un élément
			var page = $(this).attr('href'); // Page cible
			var speed = 750; // Durée de l'animation (en ms)
			$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
			return false;
		});
	});
</script>

[/code]
aussi je vous mets la ce que la console d'erreur me dit :

Uncaught TypeError: $(...).on is not a function
at HTMLDocument.<anonymous> (index.html:78)
at Function.ready (jquery.min.js:29)
at HTMLDocument.u (jquery.min.js:37)

Ps: le index.html:78 c'est la ligne $('.js-scrollTo').on('onclick', function() { // Au clic sur un élément

Je pense que le problème viens au niveau des appels de bibliothèque mais je sais vraiment pas comment faire
Si quelqu'un pouvais me sauver la vie sa serais vraiment cool !
Modifié par menvyhood (20 Jul 2017 - 13:23)

Bonjour,

Retire peut-être déjà les appels des deux versions de jQuery en trop !?