Longue page de divs: Utilisez Effect.toggle pour développer une div en bas: Page fait défiler vers le haut

J'ai une page de choses qui ressemble à ceci (et oui, j'ai inclus les javascripts scriptaculous, parce que le toggle fait réellement travail):Longue page de divs: Utilisez Effect.toggle pour développer une div en bas: Page fait défiler vers le haut

<html> 

<div id="container"> 
    <div id="thing1" class="thing" > 
     <p>Some visible stuff 1</p><a href="#" onclick="Effect.toggle('extra1');">More1</a> 
     <div id="extra1" style="display:none;"> 
     <p>Some extra and initially invisible stuff</p> 
     </div> 
    </div> 

    <div id="thing2" class="thing"> 
     <p>Some visible stuff 2</p><a href="#" onclick="Effect.toggle('extra2');">More2</a> 
     <div id="extra2" style="display:none;"> 
     <p>Some extra and initially invisible stuff</p> 
     </div> 
    </div> 

    <!-- 96 more entities of class="thing" --> 

    <div id="thing99" class="thing"> 
     <p>Some visible stuff 99</p><a href="#" onclick="Effect.toggle('extra99');">More99</a> 
     <div id="extra99" style="display:none;"> 
     <p>Some extra and initially invisible stuff</p> 
     </div> 
    </div> 
</div> 
</html>

Lorsque je clique sur le lien « More99 » à id = « thing99 » qui est en bas en bas de la page, la div à id = « extra99 » apparaît comme il se doit, mais la page puis la page défile automatiquement vers le haut.

Lorsque je clique sur le lien "More1" en haut, il reste focalisé en haut.

Y at-il de toute façon que je puisse empêcher la page de revenir en haut et/ou de la recentrer à l'endroit où je viens de cliquer? Je ne veux pas redescendre et trouver celui que je viens de rendre visible.

Source

2010-01-15 Jay Godse

-1

Jonathan & Tatu m'a lancé sur la bonne voie. J'ai essayé "return false", et cela a fonctionné de temps en temps. Avec le concept "return false" en main, j'ai recherché GOogle et suis tombé sur this page pour hrefs et renvoyer false.

Cette balise "#" me renvoyait en haut de la page. J'ai essayé href = "" sans le "return false", et cela a fonctionné comme désiré, mais il a également rechargé la page aléatoirement.

La solution suivante m'a donné ce que je voulais toujours:

<a href="" onclick="Effect.toggle('extra99'); return false;">More99</a>

Tout a fonctionné comme souhaité, et pas rechargements de pages au hasard.

Source

2010-01-15 18:36:03

Jay, vous n'avez pas besoin d'avoir une valeur 'href' vide si vous utilisez' return false'. – Sampson

C'est aussi ce que j'ai supposé. Cependant, pour une raison quelconque, j'ai fini par avoir besoin des deux. –

Essayez return false; après vos appels Effect.toggle();.

<a href="#" onclick="Effect.toggle('extra99'); return false;">More99</a>

Ce n'est pas la façon idéale de gérer cela, mais cela devrait résoudre votre problème immédiat. Idéalement, vous devez supprimer tout votre Javascript de votre HTML, et faire disparaître tous les attributs onclick, manipulant tout d'un bloc distant de Javascript.

Source

2010-01-15 17:46:29 Sampson

La raison pour laquelle vous avez besoin d'un retour faux est que sinon le navigateur continuera à exécuter l'action par défaut pour le lien, qui doit suivre '#', qui est le même que le haut de la page. –

Merci Jonathan. Cela m'a permis d'aller sur la bonne voie. –

Merci Tatu. C'est exactement ce que j'ai découvert aussi. –

Longue page de divs: Utilisez Effect.toggle pour développer une div en bas: Page fait défiler vers le haut

Répondre

Questions connexes