Discussion :

[Alexcontact]

Bonjour à tous !

J'ai ce script qui permet de se rendre sur une section de la page à la place de scroller mais mon menu passe par dessus la <div>
Il faudrait que je puisse enlever 50 pixels.

Voila mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function() {
	$('.js-scrollTo').on('click', 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;
	});
});

Un truc dans ce genre la :

Voila mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function() {
	$('.js-scrollTo').on('click', function() { // Au clic sur un élément
		var page = $(this).attr('href') - 50px; // Page cible
		var speed = 750; // Durée de l'animation (en ms)
		$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
		return false;
	});
});

Merci

[Toufik83]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.arrivee,.js-scrollTo{position:absolute}
.arrivee{top:100px}
.js-scrollTo{margin-top:300%}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<a class='js-scrollTo' href="destination">Animer</a>
<div class='arrivee' id="destination">Destination</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
	$('.js-scrollTo').on('click', function() { // Au clic sur un élément
		var Hrefpage = $(this).attr("href"); // Page cible
		var speed = 750; // Durée de l'animation (en ms)
		$("html,body").animate( { scrollTop: $("#"+Hrefpage).offset().top-50 }, speed ); // Go
		return false;
	});
});

[Alexcontact]

Merci mais cela ne fonctionne pas, tout le site est décallé,

Il n'hexiste pas de solution juste dans le javascript en le modifiant ?

Merci

[Toufik83]

le site est décalé par-ce-que peut être tu as utilisé le css de cet exemple, et les éléments .arrivee et .js-scrollTo sont en position absolue.
n'utilise pas le css de cet exemple.
Le plus important c'est d'avoir un ID pour chaque destination

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <div class='arrivee' id="destination">Destination</div>

, sinon tu passe par l'index().

[Alexcontact]

Tous les id sont différents, j'ai donc bien repris le JS mais cela le décallage de 50px ne fonctionne pas chez moi.

De puis j'ai perdu l'effet d'animation qui fait que la base scrool toute seule doucement.

Merci

[Toufik83]

bonsoir,
aucun problème ici https://jsfiddle.net/Toufi9/q16f3k85/
N.B:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("html,body").animate();

: pas la peine d'ajouter html dans le sélecteur, $("body") est suffisante.