Scroll Auto sur une page externe

Question

Ehyo

12 Aug 2011 à 13:32

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)

SBoudrias

12 Aug 2011 à 21:44

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()

Ehyo

13 Aug 2011 à 10:25

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)

ZeB_panam

13 Aug 2011 à 11:37

Dans ce cas, passes par jQuery et la fonction animate sur la valeur du scrollTop du document.

Ehyo

14 Aug 2011 à 17:21

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 !

ZeB_panam

15 Aug 2011 à 08:03

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

Ehyo

15 Aug 2011 à 11:54

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

ZeB_panam

15 Aug 2011 à 12:11

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.

Ehyo

15 Aug 2011 à 12:15

Ç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...

ZeB_panam

15 Aug 2011 à 14:15