Vraag Krijg de huidige schuifpositie en geef deze door als een variabele met een link?


Ik zal eerlijk zijn, ik ben hier ver verwijderd. Ik heb een paginatiesysteem gemaakt waarin u op een koppeling klikt om de pagina opnieuw te laden en een bepaald aantal lijstitems wordt weergegeven in een ongeordende lijst. Wanneer u er opnieuw op klikt, wordt de pagina opnieuw geladen en worden er meer items weergegeven. Bedenk hoe Twitter de tweets in uw feed laat zien.

Het probleem is wanneer het de pagina herlaadt dat het bovenaan blijft. Wat ik zou willen is dat het naar dezelfde positie springt op de pagina die het eerder had.

Ik heb al een selector voor de koppelingsinstelling. Ik weet gewoon niet hoe ik de huidige schuifpositie moet krijgen en geef deze vervolgens door aan de nieuwe pagina om naar toe te springen.

Hier is mijn code tot nu toe:

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

Waar ga ik naartoe vanaf hier?


18
2018-06-20 21:56


oorsprong


antwoorden:


  1. Laad de items opnieuw met AJAX in plaats van de hele pagina opnieuw te laden.

  2. Krijg en stel de schuifpositie in met window.pageYOffset en window.scrollTo(0, y).

    Ik zou de positie in de hash van de URL opslaan:

    // 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
2018-06-20 22:23



Zoals gs zei, voeg de elementen toe via een ajax-oproep in plaats van de pagina opnieuw te laden.

Als u het gebruik niet wilt gebruiken jQuery.ScrollTo inpluggen. Deze ondersteunt alles wat met scrollen te maken heeft waar je ooit van had kunnen dromen


2
2018-06-20 22:29



Ik denk dat je alleen maar een HTML-anker aan het einde van je link moet doorgeven. De browser bladert automatisch naar het element direct naast het overeenkomende anker. Voorbeeld:

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

Op een bepaald punt in het midden van pagina 2:

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

2
2017-10-12 04:45



volgens @Shawn Grigson's link, pageYOffset wordt niet in alle browsers hetzelfde ondersteund.

een jQuery-oplossing (hopelijk echt compatibel met meerdere browsers, hoewel ik deze nog niet heb getest) voor het verkrijgen en instellen van de verticale schuif van een element is scrollTop ().


1
2018-06-16 06:54