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

131 comments
Xcode defender
Xcode defender

L'un des meilleurs sites qui decrit et montre bien ce que lon recherche 

continuez comme sa, et merci pour le bien que vous apportez 

jacky carlingue
jacky carlingue

Salut,


Merci pour cette source qui m'est précieuse et qui fonctionne parfaitement sur mes pages "classiques".

Je me heurte cependant à un soucis de taille... 

Voici de quoi il retourne:

J'ai une page qui comporte un jeu de cadre (framset) composée d'une partie haute et d'une partie basse.

Dans la partie haute se trouvent de multiples vignettes ce qui génère un scroll horizontal.

Dans cette partie, j'ai placé plusieurs ancres nommées que "j'appellent" depuis des  liens dans la partie basse du jeu de cadre afin d' obtenir un déplacement horizontal.

Le déplacement s'effectue de façon classique mais l'effet de variation de vitesse provoqué par les scripts n'est pas opérant.

Comment pourrais-je faire?

Merci d'avance du coup de main.

Bien cordialement

JC


Thierry M
Thierry M

Bonjour,

Merci pour ce tuto!

Ca fonctionne bien pour un scroll d'images vertical, mais je n'arrive pas à le faire fonctionner avec un scroll horizontal.

J'ai bien essayé de changer l'axe dans localscroll.js ligne 41, ainsi que quelques modifications ligne 137 dans scrollto.js.

Malheureusement ça ne fonctionne pas. 

Je dois dire que je suis vite dépassé dans le codage en js.

Existe-t-il une solution ?

Merci d'avance pour vos réponses.

stratisbakas
stratisbakas moderator

@Thierry M Bonjour,

Avez-vous trouvé une solution ? Comment avez-vous essayé de changer l'axe ?

sarah
sarah

Salut ! merci pour ce code :) j'ai un soucis : j'arrive à faire marcher ta fonction toute seule sur mon site. Mais j'ai remarqué qu'elle désactive mon slider ! mon slider je l'ai pris sur http://slidesjs.com/ Il marche très bien, sauf quand je pose ton code de scroll... je débute tout cela... quelqu'un a une idée?

admin
admin

Hello, Tu as regardé dans ton inspecteur de navigateur si tu avais une erreur dans la console. Les deux scripts doivent rentrer en conflit.

César
César

Bonjour, Juste pour dire un grand merci pour ce script. Cdt, César

Blin Andréas
Blin Andréas

Yo. J'utilisais ce script et j'en étais très satisfié mais il s'est mis à arrêté de fonctionner, j'ai tenté de réinstaller et cela ne marche pas non plus, pourtant sur la version test qui est mise dans les files sources ça marche. Voici les scripts que je charge je pressent le problème avec flat ui pro puisque ça marchait avant, des antécédents avec Flat UI Pro?

admin
admin

Bonjour, pas d'antécédents non mais souvent des problèmes de conflits entre les scripts. Avez-vous résolu votre problème ?

gillard pierre-elie
gillard pierre-elie

salut super bon script je l aime vraiment bien. Mais je suis bloquer depuis peu. je dois utiliser pour mon menu la fonction removeClass, mais cette fonctionne ne fonctionne pas avec cette bibliotheque jquery v1.4.2 error sur deux ligne. j ai mis la bibliotheque jquery-1.10.2.js maintenant ma fonction fonctionne ,mais plus le scroll to. pourriez vous mettre a jour votre script avec cette bibliothèque ou supérieure car je ne sais pas faire merci beaucoup pour votre temps et votre partage.

Noa Bianchi
Noa Bianchi

Bonsoir ! Plutôt très novice en la matière, j'ai tenté de créer cet effet, mais malheureusement cela ne fonctionne pas. J'ai adapté le code html et css a la page que je voulais, bien garder tout les fichiers et fouiller de fond en comble pour voir si il y avait un soucis mais toujours aucune animation qui n'apparait ... c'est la première fois que j'utilise du javascript, et a vrai dire je ne comprend pas tout ! Y aurait-il quelqu'un pour m'aider un peu (c'est pour un devoir en plus) Merci d'avance :)

Dan002
Dan002

Salut, Est-ce que l'on peut appliquer ce procéder sur un menu horizontal, qui appel une autre page, donc un site qui' n’est pas en one page ? Je ne sais pas si je suis bien clair !

StantheBrain
StantheBrain

Superbe..! Mais comment y faire appel dans mon logitiel ? Dans les options de lien, il y à bien un éditeur de fonction js mais je ne vois pas qu'elle phrases y écrire pour que cela fonctionne... Voici ce qui qui est écrit dans la boite de dialogue d'appel Javascript de mon logitiel : "Vous pouvez faire un appel Javascript en parallèle de votre lien... ex : myFonction('param1')" Si ya plus intelligent que moi... merci pour l'aide. Stan

StantheBrain
StantheBrain

Allais il y a plus intelligent que moi... MOI Parce que j'ai trouvé seul Le logiciel c'est WebAcappella Je voulais ajouter une fonction scrollTo sur un bouton à l'aide de la fenêtre de dialogue JS du dit bouton..., mais aucune doc à ce sujet alors en essayent divers type de phrases..., j'ai trouvé celle-ci, qui fonctionne: $('html,body').animate({scrollTop:500},'slow'); Maintenant j'aimerais que le scrool soit plus doux. Stan

admin
admin

Bonjour, Cela doit venir des bibliothèques jquery pas compatibles, ça te donne quoi comme erreur ?

Oliv
Oliv

Salut, j'aimerais appliquer ce script non pas au scroll de la page entière mais seulement à un block qui contient donc des div avec 'id'. Que faut-il modifier ? Merci.

Cordero
Cordero

Bonjour merci pour ce tuto! Mais je ne comprend pas ce que je dois faire avec le fichier zip "fonctiion-scrollTo.zip". je le decompresse et apres dois-je glisser les fichiers quelque part? L'installation du zip directemnt dans joomla ne fonctionne pas: "JInstaller: :Install: impossible de trouver un fichier d'initialisation XML" Désolé je debute mais je suis motivé lol!

admin
admin

Bonjour, Désolé de répondre si tard. Tous les fichiers disponibles ciblent une utilisation HTML et non sur joomla. Il doit exister du smooth scroll pour Joomla. Bon courage à toi

Laura-Lee Tremblay
Laura-Lee Tremblay

Bonjour, je me demandais comment fait-on pour scroller vers un mot et non une image ? Merci !

Sacha
Sacha

Bonjour, Et merci beaucoup pour cette fonction que j'ai appliqué sous wordpress. Beau boulot ! ;-) Juste un truc qui ne fonctionne pas chez moi, la vitesse... J'ai beau la changer dans jquery.localscroll.js... aucun changement. Une idée ? Merci beaucoup ! Sacha

Vincent
Vincent

Salut Sacha, Je suis pareil que toi, j'avais ajouté ce script pour Wordpress. Tout fonctionnait avant que je ne décide de faire un appel plus propre et plus viable de ces scripts. Au début je faisais appel aux scripts avec ... directement dans le header du thème parent. Pas cool en cas de version up du thème. Donc j'ai rapatrié les scripts dans le thème enfant et j'ai chargé les scripts depuis function.php. Ça ne fonctionne pas. Je suis alors repassé à l'appel de fonction dans le header.php enfant et ça ne fonctionne toujours pas. J'ai tout replacé comme avant et ça ne fonctionne plus ^" Pourrais tu me donner ta méthode d'appel stp ? Merci par avance !

Vincent
Vincent

Fausse alerte ! J'ai réussi à faire fonctionner de nouveau les scripts. Il manquait l'appel du script jquery.js. Pour info : Si vous voulez faire tourner ces scripts sur une seule page insérer cette condition comme suit. Bon courage à toutes et à tous !

Vincent
Vincent

Désolé, problème de formatage du code pour le post précédent. Une fonction éditer serait une bonne chose Mr l'Admin ^^ N'incluez pas les espace pour les balises "PHP"

Sacha
Sacha

Salut Vincent! Tant mieux si ça marche! ;-) Chez toi, la vitesse défile normalement où c'est très rapide aussi? Le réglage ne change rien chez moi. Personne à une idée ? Merci bien !

Charlotte
Charlotte

Bonjour, J'adore cet effet, c'est exactement ce qu'il me faut mais pour une raison que j'ignore pour l'instant, ca ne fonctionne pas sur WordPress. L'ancre est bien en place mais l'effet non présent. J'ai des erreurs qui m'indiquent la chose suivante : Uncaught ReferenceError: jQuery is not defined jquery.localscroll.js:133 Uncaught ReferenceError: jQuery is not defined jquery.scrollTo.js:208 Quelqu'un peut-il m'aider ? Merci

Lau
Lau

La démo ne fonctionne pas sur Google Chrome sur mac! C'est dommage.

admin
admin

Bonjour, chez moi ça marche alors que j'utilise mac et google chrome

Lau
Lau

Autan pour moi, j'avais pas fait attention. J'avais oubliè que j'avais l'extension "Web Browser Switcher" d'activée sur un autre browser. Désolé pour le dérangement.

Vincent
Vincent

Bonjour, J'ai un petit soucis d'offset pour ma part (avec ou sans ces scripts) et j'espérais que ce script corrige le problème puisque la démo fonctionne super bien ! Y-a-t-il la fonction d'éditée quelque par où je pourrai remonter un peu le contenu de la page après défilement ? En fait, le soucis c'est que mon menu est flottant. C'est à dire qu'il descend en même temps que le contenu... léger petit soucis de placement d'ancre dans ce cas :P PS : Je ne peux me passer de ce menu flottant, c'est une demande express de mon associé ^^ Merci pour ton aide et surtout pour ton travail !

Vincent
Vincent

Problème résolu ! J'ai fini par trouver après avoir poussé la recherche pendant quelques heures. Ce qui est dingue, c'est qu'à l'instant où le mot offset m'est revenu à l'esprit - alors que je l'avais écrit sur mon commentaire précédent - j'ai tout de suite cherché s'il n'y avait pas un fonction existante. Eureka ! offset() existe. Voici donc comment je l'ai placé dans le code : // Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option. // @see http://flesler.demos.com/jquery/scrollTo/ // The defaults are public and can be overriden. $localScroll.defaults = { duration:1000, // How long to animate. axis:'y', // Which of top and left should be modified. offset: -175, event:'click', // On which event to react. stop:true, // Avoid queuing animations target: window, // What to scroll (selector or element). The whole window by default. reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling /* lock:false, // ignore events if already animating lazy:false, // if true, links can be added later, and will still work. filter:null, // filter some anchors out of the matched elements. hash: false // if true, the hash of the selected link, will appear on the address bar. */ }; Observez le offset : -175, Étant donné que ma page se plaçait trop bas par rapport à l'ancre, il fallait la remonter avec une valeur négative. A contrario, si votre page est trop haute, placez une valeur positive.

Sacha
Sacha

Merci Vincent! C'est exactement ce qu'il me fallait. ;-) Super !

Didiauss
Didiauss

Bonjour, Merci pour ce tuto très intéressant ! … est-il possible de déclenché automatique le Scroll vers une basile id ? et est-il possible de définir un temps avant le déclenchement automatique de l'action? Merci d'avance pour votre réponse …

admin
admin

Bonjour, Qu'entends tu par "déclenché automatique" ?

Alann
Alann

Je penses qu'il penses à la même chose que moi Il veut que après un temps donné , la page descende toute seul, via la fonction scrollTo jusqu'a la balise voulut

Adrien Labigne
Adrien Labigne

Merci pour ce tuto très simple si on s'y connais un tout petit peu. Par contre, la méthode ne marche plus avec jQuery 2.1.. Est-ce que tu pense pouvoir mettre à jour le tuto ? Car les fonctionnalités que j'utilises sont implémenté dans cette version.. Merci beaucoup :)

admin
admin

Bonjour je suis désolé mais très débordé en ce moment. Cela n'est pas prévu pour l'instant. Tu as un message d'erreur particulier ?

Victor
Victor

Génial ! Merci beaucoup et bravo

Zouz
Zouz

Bonjour, Merci pour ce script c'est exactement ce que je recherchais. Cependant je n'y connais strictement rien en javascript du coup je me posais une question toute bête : où dois-je intégrer les fichiers du dossier js que vous donnez dans mon thème Wordpress ? J'ai un dossier dans mon thème qui s'appelle js à la racine, j'ai supposé que je devais les ajouter dedans, je ne sais pas si je me trompe ? Et ensuite les lignes pour les lignes suivantes, je dois les mettre dans le header c'est ça ? Merci d'avance pour votre coup de main :)

Zouz
Zouz

Mince je travaille encore en local, je te donnerais le lien quand il sera en ligne si d'ici là je n'ai pas trouvé la solution ;) Merci

Jérémie Melin
Jérémie Melin

Donne moi le lien de ton word press j'essaye de voir ou le placer

thomas Koro
thomas Koro

Bonjour, merci pour le tuto, superbe effet de scrool c'est impec ! Cependant, est-ce normal que cela ne fonctionne pas sous chrome ? J'ai tester IE et FF sous Mac / PC impec, mais chrome Mac / PC rien ...

Jérémie Melin
Jérémie Melin

Sur ton lien je ne voit de scroll ni sur crome ni sur firefox, si tu a d'autre JS dans ton site essayer en le enlevant un par un, moi dans une page ça buger, j'ai du enlever un autre JS pour que le scroll fonctionne ;)

Jérémie Melin
Jérémie Melin

Bonjour, serait-il possible de rajouter une ligne de code qui joue en son quand la page défile ?

Jérémie Melin
Jérémie Melin

Merci, pourrais tu juste me dire ou dois'je implanter ke code dans le JS ?

admin
admin

Bonjour, oui cela doit être possible il faut chercher comment manipuler du son en JS

Trackbacks

  1. […] Fonction scrollTo pour les ancres nommées ( jQuery ) | WebDesignWeb webdesignweb. HTML 5; CSS 3; Javascript; jQuery; CSS. Typographie; Portfolio; Print; Dribbble; High tech; Infographics. Home; Web; Webdesign; Inspiration; Autres. Recherche pour: Rechercher : Applicat… […]