Obtenir la position de défilement actuelle et la passer sous forme de variable avec un lien?

Question

Je vais être honnête, je suis hors de ma profondeur ici. J'ai créé un système de pagination dans lequel vous cliquez sur un lien pour recharger la page et où un certain nombre d'éléments de la liste sont affichés dans une liste non ordonnée. Lorsque vous cliquez à nouveau, la page sera rechargée et d'autres éléments s'afficheront. Pensez à la façon dont Twitter affiche les tweets dans votre flux.

Le problème, c’est que lorsqu’il recharge la page, il reste en haut. Ce que je voudrais, c’est qu’il se place à la même position sur la page qu’il avait précédemment.

J'ai déjà un sélecteur pour le lien correctement configuré. Je ne sais tout simplement pas comment obtenir la position de défilement actuelle, puis je le passe à la nouvelle page afin qu'il y accède.

Voici mon code jusqu'à présent:

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

Où vais-je à partir d'ici?

Answer 1

1. Rechargez les éléments en utilisant AJAX au lieu de recharger toute la page.

2. Obtenir et définir la position de défilement à l'aide de window.pageYOffset et de window.scrollTo (0, y) .

   Je stockais la position dans le hachage de l'URL:

   // after loading the document, scroll to the right position
   // maybe location.hash has to be converted to a number first
   $(document).ready(function() {
       window.scrollTo(0, location.hash);
   });
   
   // I'm not quite sure if reload() does preserve the hash tag.
   location.hash = window.pageYOffset;
   location.reload();
   

Answer 2

Comme gs dit, ajoutez les éléments via un appel ajax au lieu de recharger la page.

Si vous ne souhaitez pas utiliser le jQuery.ScrollTo brancher. Qui prend en charge tout ce qui concerne le défilement dont vous auriez pu rêver

Answer 3

Je pense que ce dont vous avez besoin est simplement de passer une ancre HTML à la fin de votre lien. Le navigateur fera automatiquement défiler jusqu'à l'élément situé juste à côté de l'ancre correspondante. Exemple:

<a href="page2.html#myanchor">Next page</a>

À un moment donné au milieu de la page2:

<a name="myanchor">My item N</a>

Answer 4

Selon le lien de @Shawn Grigson, pageYOffset n'est pas pris en charge de la même manière sur tous les navigateurs.

une solution jQuery (si tout va bien compatible avec tous les navigateurs, bien que je ne l’aie pas encore testée) pour obtenir et définir le défilement vertical d’un élément est scrollTop () .