11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toutes et à tous.


J'ai compris le procéder pour mettre un scroll à partir d'un lien vers une ancre.

Sauf que là mon souhait est de mettre un scroll lorsque l'on arrive directement sur la page.
Mon header étant trop grand sur la hauteur, j'aimerais faire défiler la fenêtre directement au contenu afin que l'utilisateur comprenne qu'il peut remonter pour accéder au menu.

Je pourrais très bien mettre un lien "Menu" > "Page1#top", mais je souhaite que l'utilisateur voit clairement le header + le menu, puis le défilement jusqu'au contenu.

Comment puis-je faire ?


Merci !
Modifié par Ehyo (12 Aug 2011 - 16:09)
Déclenche un évènement click sur un lien avec un ancre et utilise un plugin de smooth scrolling (il y en a pas mal, tu trouveras facilement !)

Sinon, tu peux aussi te servir de la méthode JS scrollTo()
Merci pour ta réponse, mais malheureusement je me suis mal exprimé.

Concrètement, voici mon problème :

http://www.palmex.fr/v2/

Dans le menu à droite, cliques sur "Photos", puis choisis la catégorie "Parcs".

Tu vas te retrouver directement sur la galerie photo sans avoir vu le leader en haut de page.
J'aimerais que le visiteur cliques, arrives en haut de page, puis que le scroll s'effectue jusqu'en bas de page.

Cela me semble impossible avec Smooth Scrolling.


Merci
Modifié par Ehyo (13 Aug 2011 - 15:34)
Je ne connais pas JQuery mais d'après les tutos que j'ai pu voir, ScrollTop s'effectue seulement après que l'utilisateur ai cliqué.
J'aimerais que ça soit automatique, donc que l'utilisateur n'ai rien à faire pour que la page descende toute seule jusqu'à la galerie photo voulue.

Est-ce possible avec JQuery ?
Si oui, comment ?

Merci !
jQuery est un framework javascript, qui permet tout ce que le langage javascript permet. Donc, il est simplement possible d'appeler des actions au chargement de la page.

Exemple pour un scroll de la page :

jQuery(function ($) {
	
	function scrollToPosition(position){
		// On cible les éléments html et body pour se prémunir d'un bug sur différents
 		// navigateurs.
		$("html,body").animate({scrollTop : position},500);
	}
		
	scrollToPosition(200);
		
});


Sinon, toujours via jQuery, il existe un excellent plug-in qui permet de cibler un élément vers lequel scroller :
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Merci ZeB_panam, mais j'ai oublié de préciser...
Je ne connais pas du tout le Javascript ^ ^

Donc le code que tu m'as donné, je n'arrive pas à l'intégrer à ma page web.


<head>

<script src="jquery.js" type="text/javascript">
jQuery(function ($) { 
     
    function scrollToPosition(position){ 
        // On cible les éléments html et body pour se prémunir d'un bug sur différents 
         // navigateurs. 
        $("html,body").animate({scrollTop : position},500); 
    } 
         
    scrollToPosition(200); 
         
}; [b]//-- Une erreur m'est signalé sur cette ligne[/b]

</script>

</head>



Est-il possible d'insérer le code directement sur cette page :
http://www.palmex.fr/v2/photos-parcs.php#top

Pour ce qui est de l'apprentissage du JS, pourquoi pas à l'avenir, mais j'espère te laisser tranquille au plus vite ! = )

Encore Merci
Oulah attention, on n'indique pas une source à une balise <script>, pour ensuite mettre du code à l'intérieur.
Sinon l'erreur vient du fait que tu as mal copié-collé mon code, tu as oublié une parenthèse vers la fin…

Donc :
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 
jQuery(function ($) { 
     
    function scrollToPosition(position){ 
        // On cible les éléments html et body pour se prémunir d'un bug sur différents 
         // navigateurs. 
        $("html,body").animate({scrollTop : position},500); 
    } 
         
    scrollToPosition(200); 
         
});

</script>



Quant à la compatibilité avec ton site, je ne peux te dire, car tu utilises un script nommé "sliders.js" et je ne sais pas s'il ne rentrera pas en conflit avec jQuery. Par contre, shadowbox.js est compatible je crois.
Ça ne fonctionne pas.

Et le problème ne viens pas de sliders.js puisque même une fois supprimer, la page ne scroll pas vers la galerie...
Ehyo a écrit :
Ça ne fonctionne pas.

Normal, tu n'as pas mis le fichier jquery.js sur ton serveur Smiley rolleyes
Modifié par ZeB_panam (15 Aug 2011 - 14:16)
Ca fonctionne parfaitement. : )


Merci pour ta patience et pour le suivi de ce post.
L'entraide gratuite est toujours d'actualité.

Merci ZeB : )