Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

Faire un « smooth scroll » sur les liens internes d’une page en jQuery

Voici un petit bout de code qui permet de faire un scroll automatique et tout en douceur sur les zones d’une même page.

1 – Imaginons le code html suivant :

<html>
<head>
<style>
.bloc{
	width:200px;
	height:200px;
	margin:50px auto 0 auto;
	background-color:#e0e0e0;
}
.bottom{
	width:200px;
	text-align:center;
	margin:1000px auto 0 auto;
	background-color:#e0e0e0;
}
</style>
</head>
<body>
	<div class="bloc"></div>
	<div class="bottom">Scroll Up</div>
</body>
</html>

2 – On souhaite que lors d’un clic sur le texte « Scroll Up », ça nous amène en haut de la page :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.bottom').click(function(){
			$('html,body').animate({scrollTop: 0}, 1000);
		});
	});
</script>

3 – Oui, mais je veux être amené à un élément bien précis de la page :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.bottom').click(function(){
			var offset = $('.bloc:first').offset();
			$('html,body').animate({scrollTop: offset.top}, 1000);
		});
	});
</script>

4 – Explications :

	$(document).ready(function(){
			/* On surveille l'évènement click sur tous les 
			    éléments qui ont la classe "bottom" */		
			$('.bottom').click(function(){
 
			/* On récupère la position ( fonction offset() ) du 
			     premier élément ( :first ) qui a la classe "bloc".
			     On la met dans la variable offset */
			var offset = $('.bloc:first').offset();
 
			/* Au lieu de remonter en haut de la page, on remonte 
			    à la position top de l'élément ( offset.top ) */
			$('html,body').animate({scrollTop: offset.top}, 1000);
		});
	});

5 – Live Demo :

4 commentaires

Microw
14 Déc 2013 à 16:45

Bonjour. Je suis débutant en web, et ton exemple est exactement ce que je souhaite faire.

Cependant étant débutant, je n’ai pas tout les réflexes dont nécessite un web-designer ou autre;

Et dans ce tuto ( bien que très explicite et clair ), tu n’expliques pas ou l’on doit inclure le script dans notre page.

– dans la page html?
– dans une page mise à part?
– que mettre dans le src= »  »

Cependant, tout le reste est bien expliqué.

Merci d’avance.

Louis
30 Déc 2013 à 19:24

Il est préférable d’inclure tes scripts en fin de page: juste avant la fermeture de ta balise et ceci pour une raison d’optimisation de ton code.
Ici, il a intégré son script « jquery.js » directement dans un fichier à part qu’il a mit dans le même répertoire que le fichier .html .

Petit exemple:
• Si tu souhaite regrouper tous tes scripts dans un même dossier (par exemple tous_mes_scripts/*.js), à l’intérieur même du dossier contenant ton fichier HTML, tu devras indiquer le chemin dans l’attribut ‘src’ de ta balise ainsi: .
• En revanche, si tu souhaites directement intégrer le script via internet, tu as juste besoin d’ouvrir une balise comme ceci: sans avoir besoin de déclarer quoi que ce soit. Cependant, il te sera nécessaire d’avoir une connexion internet pour lire ton fichier JQuery.js.
• Et dernière chose, il est également possible d’ouvrir une balise dans ton code HTML même. Si tu fais cela, il ne faut rien indiquer en attribut et mettre ton code directement à l’intérieur des balises.

Voili voilou, j’espère que j’ai été assez clair.
En espérant t’aider malgré que se soit près de 2 semaines après ton post.

Cordialement.

Louis
30 Déc 2013 à 19:30

apparemment, il n’a pas aimé mes balises ^^ je te refait les deux premiers points:

• … l’attribut ‘src’ de ta balise ainsi: < script type = "text/javascript" src = "tous_mes_scripts/jquery.js" et tu fermes ta balise (de peur qu'il me refasse le même coup :P)
• … tu as juste besoin d’ouvrir une balise comme ceci: < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot; et tu ferme ta balise ;)

Voilà, en espérant qu'il ne me refasse pas le même coup.

Louis
30 Déc 2013 à 19:33

Encore une faute :(

le src du deuxième point: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Celle-là est la bonne. Désolé encore pour les fautes et pour les trois posts qui auraient dû en faire qu’un.

Répondre