Je vais aujourd’hui vous parler d’une fonction jQuery très utilisée. C’est le script scrollTo qui permet donc de donner un effet de déplacement sur une page internet pour se rendre sur une ancre nommée.

Les ancres nommées sont en fait des balises positionnées à un endroit spécifique d’une page et vers laquelle on peut faire un lien directement. Du coup en cliquant sur ce lien on se dirige directement vers la balise en question mais tout ceci sans transition et le rendu est plutôt . Avec le script scrollTo on va se rendre à la balise supposée mais avec une certaine vitesse de déplacement. On retrouve souvent cet effet sur les sites one page.

Je vous propose donc maintenant soit de voir une démo soit de télécharger les fichiers sources. Vous trouverez dans la suite de l’article le code si vous souhaitez l’intégrer directement dans votre site.

DémoFichiers sources

Voici le code html de la page complète :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fonction scrollTo démo</title>

	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>

	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->

	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
    
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->

</head>

<body>

<div id="header">
	
	<div id="menu">
		<ul>
			<li><a href="#top">Accueil</a></li>
			<li><a href="#img1">Image 1</a></li>
			<li><a href="#img2">Image 2</a></li>
			<li><a href="#img3">Image 3</a></li>
			<li><a href="#img4">Image 4</a></li>
			<li><a href="#img5">Image 5</a></li>
			<li><a href="#img6">Image 6</a></li>
		</ul>
	</div><!-- #menu -->
	
</div><!-- #header -->

<div id="container">
	
	<div id="top"></div>
	
	<div id="img1"></div>
	<div class="image-ombre"><img src="img/1.jpg" alt="image 1" title="image 1" /></div>
	
	<div id="img2"></div>
	<div class="image-ombre"><img src="img/2.jpg" alt="image 2" title="image 2" /></div>
	
	<div id="img3"></div>
	<div class="image-ombre"><img src="img/3.jpg" alt="image 3" title="image 3" /></div>
	
	<div id="img4"></div>	
	<div class="image-ombre"><img src="img/4.jpg" alt="image 4" title="image 4" /></div>
	
	<div id="img5"></div>
	<div class="image-ombre"><img src="img/5.jpg" alt="image 5" title="image 5" /></div>
	
	<div id="img6"></div>
	<div class="image-ombre"><img src="img/6.jpg" alt="image 6" title="image 6" /></div>

	<div id="espace-bas"></div>
	
</div><!-- #container -->

</body>
</html>

Maintenant le code CSS :

/* code css */

body {
	margin: 0;
	padding: 0;
	background: #5d5d5d url(../img/bg.jpg) no-repeat center top;
	background-attachment: fixed;
}

#container {
	width: 960px;
	margin: 0 auto;
	padding-top: 100px;
}

#header {
	background: url(../img/transparency.png) repeat;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0px;
	left: 0px;
}

/*------ menu -------*/

#menu {
	margin: 0 auto;
	width: 960px;
}

#menu ul {
	padding: 0;
	list-style: none;
	margin: 30px 0 0 0;
	font-family: "Trebuchet MS", Arial;
	font-size: 15px;
}

#menu ul li {
	display: inline;
	margin-right: 80px;
}

#menu ul li a {
	text-decoration: none;
	color: white;
}

/*----- ombre image -------*/
.image-ombre {
	background: url(../img/ombre-image.png) no-repeat center 306px;
	height: 400px;
}

/* je definis ici des tailles pour les div img1, img2, etc afin de pouvoir décaler la photo du haut */

#img1, #img2, #img3, #img4, #img5, #img6 {
	height: 100px;
}

#espace-bas {
	height: 240px;
}

Vous pouvez modifier la vitesse de défilement de la page dans le fichier jquery.localscroll.js dans le dossier localscroll

// a la ligne 40
duration:1000, // 1000 étant 1000 millisecondes soit 1 seconde, a vous de faire des essais

J’espère que ce petit tuto vous aura plu… n’hésitez pas à partager