Javascript et scroll

Version imprimable

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:

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:

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

Code:

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

Code:

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

Code:

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;
	});
});

03/08/2016, 11h39
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
03/08/2016, 12h45
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:

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

, sinon tu passe par l'index().
03/08/2016, 16h41
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 :)
03/08/2016, 19h45
Toufik83

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

Code:

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

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