2012-05-11 5 views
1

je suis encore à essayer de saisir ce genre de choses si l'aide serait appréciéedéfilement automatique basé sur scrollTop()

Je 5 div est tout mis avec des hauteurs à base de .height $ (fenêtre)()
I ont mis chaque div avec un identifiant unique

j'ai quelques vars mis

var wH = $(window).height(); 
var half-wH = (wH)/2; 

ce que je voudrais faire serait d'avoir requête défiler la fenêtre à chaque ID en fonction de 50% des window.height soit chemin

-à-dire la hauteur fenêtre 600px
moins de 300px scrollTo # ID1
plus alors 300px mais moins de 900px scrollTo # ID2
etc., mais seulement après un petit retard

Je sais que si j'utilise
. scrollTop() en combinaison avec la 1ère div # ID1
il va me montrer les pixels défilent du haut de ma page

comment je place tout ensemble a moi me gratter la tête !!

+1

probablement une bonne idée pour configurer votre exemple dans http://jsfiddle.net/ :) –

+0

bonne idée ici c'est [jsfiddle] (http://jsfiddle.net/N5U2j/15/) –

+0

vous devez redimensionner la fenêtre du navigateur pour les dimensions à définir pour une raison quelconque, ne se produit pas en dehors de jsfiddle. –

Répondre

1
var st = $(window).scrollTop(); 
var elem = $('#id1').offset().top; 
var elem2 = $('#id2').offset().top; 

if(st < 300) { 
    $(window).scrollTop(elem) 
} 

if(st > 300 && st < 900) { 
    $(window).scrollTop(elem2) 
} 
+0

c'est ce que je suis en train de faire [ici] (http://www.beoplay.com/Products/Beolit12) jusqu'ici en jouant avec vous le code que je l'ai eu à faire et retour instantané au document haut mais pas une diapositive –

+0

qui n'était pas très bon anglais J'ai un [jsfiddle] (http://jsfiddle.net/N5U2j/15/) configuration je voudrais utiliser un if (st < 300) { $ ("body"). ScrollTo ("# ID1"). Délai (1000); } } –

+0

ok donc plus de bidouillage et j'en suis à ce point var st = $ (window) .scrollTop(); $ (document) .scroll .ready (function() {$ (fenêtre) (function() { if (st <300) {$ ("corps"). ScrollTo ("# 1", 2000) .delay (2000); } sinon if (st> 300 && st <900) { $ ("body"). scrollTo ("# 2", 2000) .delay (2000); } sinon si (st> 900 && st <1500) { $ ("body"). scrollTo ("# 3", 2000).retard (2000); } }); }); mais maintenant sans importance whet $ (window) .scrollTop(); numéro est-il fait défiler vers l'ID1 ou quel que soit ID défini dans la première condition «si» –

2

Pour utiliser le JavaScript scrollBy et SetTimeOut méthodes pour faire une page web défilement vers le bas automatiquement. Modifiez la valeur du délai d'attente pour modifier la vitesse de défilement en millisecondes.

function pageScroll() { 
     window.scrollBy(0,50); // horizontal and vertical scroll increments 
     scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds 
} 

Pour être faire défiler automatiquement lorsque la page se charge, ajoutez le code suivant à la balise body:

<body onLoad="pageScroll()"> 
0

Essayez quelque chose comme ceci:

if(size < 300){ 
$(document).scrollTo("#id1"); } 
else if(size > 300 && size < 900){ 
$(document).scrollTo("#id2"); } 
Questions connexes