Discussion :

[Décibel]

Bonjour,
J'ai développé ce petit code en javascript, mais je rencontre un problème que je n'arrive pas à régler...
Je souhaite que quand l'internaute, sur une page de mon site, utilise la roulette de la sourie sur 30pixels il soit envoyé vers le div id="div3" tout en douceur...
La fonction marche mais reste active tout le temps et de fait l'internaute ne peux plus bouger de la position "div3"...
Comment faire pour que la fonction ne s'applique que quand on est sur le scroll 30 et plus après ?


Mon code est là :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
	$(window).scroll(
		function () {
			if ($(this).scrollTop() > 30) { 
				    var target = $(this).attr("div3"); //Get the target
					var scrollToPosition = $(target).offset().top;
 
					$('html').animate({ 'scrollTop': scrollToPosition }, 1200, function(){
						$('html').animate({ 'scrollTop': scrollToPosition }, 0);
					});
			}
 
		}
	);			 
});

Merci de votre aide !

[Toufik83]

Bonjour,

êtes-vous sûr que votre code fonctionne correctement ? car quand je vois ceci $(this).attr("div3"); à l'intérieur de la fonction de rappel du scroll de window, le mot clé this pointe sur l'élément window et donc il doit obligatoirement avoir une propriété div3 ce qui n'est pas correcte vu que la propriété est invalide.

J'ai fait un petit exemple fonctionnel permettant de gérer ceci en utilisant une variable go :

Code html :

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

<div id="test"></div>

Code css :

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

#test{margin-top:400px;width:100%;height:200px;background-color:red}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
  let go=true;
  $(window).scroll(function() {
    if($(this).scrollTop()==0) go=true;
    if ($(this).scrollTop() > 30&&go) {
      goScroll=false;
      var target = "#test";//$(this).attr("div3"); //Get the target
      var scrollToPosition = $(target).offset().top;
 
      $('html').animate({
        'scrollTop': scrollToPosition
      }, 1200);
    }
 
  });
});

Montrez nous le code HTML pour mieux comprendre les choses...

[Décibel]

Bonjour,

Merci pour le code !
Mais en fait il y a le même problème, en descendant, la page bouge jusqu'à l'ancre "div3" mais après il n'est plus possible de bouger de cette emplacement...
Je souhaite juste que la page bouge jusqu'à l'ancre div3 mais puise après de nouveau bouger sur la roulette de la sourie...

Voir : https://www.denisbillo.com/test3/index.php

Merci

[Toufik83]

Bonjour,

Désolé, c'été mon erreur, remplacez la ligne 6 de mon code précédent par go=false;, la variable goScroll n'est pas définie dans le script, c'est plutôt go qui est utilisée.