Scroll one page

Bonjour,

Je suis en train de coder un site en "one page", ça marche bien sauf que j'arrive pas à trouver une façon claire de faire le scroll correctement.

Il y a un header avec un menu dedans, et lorsque l'on clique sur un onglet du menu, on descend sur la page (principe du one page). Mais je sais pas comment faire pour que ça descende doucement, pas d'un coup. Parce que du coup on voit pas que c'est un site en one page.

J'ai fais en HTML5 et CSS3. Pour le moment en cours on a pas encore vu tout ce qui est PHP, JavaScript, Jquery etc... et j'ai cru voir que c'était avec du Jquery qu'on faisait ça. Donc si quelqu'un pouvait me filer le code Jquery en m'expliquant un peu pour que je puisse l'adapter ce serait super.

Merci à tous ceux qui pourront m'aider
Modifié par SandG (25 Feb 2016 - 15:21)

Bonjour. Vous recherchez ce que l'on appelle un effet "Smooth Scroll", et la solution passe effectivement par javascript (jQuery étant un framework de javascript).

Le code en jQuery (à adapter selon vos besoins) :

// -----------------------------------------------------------------------------
// @section     Smooth Scroll
// @description Défilement fluide
// -----------------------------------------------------------------------------

jQuery(document).on('click', 'a[href*=#]:not([href=#])', function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length){
			$('html,body').animate({
				scrollTop: target.offset().top
			}, 400);
//			return false;
		}
	}
});

Super merci beaucoup.

Par contre, ce code-là je peux le mettre sur ma feuille CSS ou je dois créer une autre page exprès ?
Et qu'est-ce qui est à changer du coup pour qu'il s'adapte à ma page ? (désolé, jamais fait de javascript....)

Il y a plusieurs manières de procéder. Dans tous les cas il faut d'abord appeler la lib' jQuery et seulement APRÈS le script qui y fait référence.

En admettant que vous chargiez jQuery via les CDN de Google il vous faut appeler la lib' de cette manière dans le footer de la page html :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ou alors vous mettez le code dans un fichier .js (exemple : jquery.js) à part et vous y aurez recours ainsi (lien en relatif à modifier selon vos besoins) :

<script src="jquery.js"></script>

Faites de même pour le script proposé ; vous pouvez aussi l'injecter directement dans la page entre deux balises script (et toujours APRÈS l'appel de jQuery) :

<script>
// Le script...
</script>