web-dev-qa-db-fra.com

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

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

Le problème est quand il recharge la page, il reste en haut. Ce que j'aimerais, c'est qu'il saute à la même position sur la page qu'il avait auparavant.

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

Voici mon code jusqu'à présent:

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

Où dois-je aller d'ici?

jqueryscrollscroll-position
18
dougoftheabaci

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

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

    Je stocke 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();
29
Georg Schölly

Je pense que ce dont vous avez besoin est simplement de passer une ancre HTML à la fin de votre lien. Le navigateur défilera automatiquement jusqu'à l'élément 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>
2
Edemilson Lima

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

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

2
jitter

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

une solution jQuery (j'espère vraiment vraiment compatible avec tous les navigateurs, même si je ne l'ai pas encore testée) pour obtenir et définir le défilement vertical d'un élément est scrollTop () .

1
ericsoco