2013-06-07 14 views
12

Sto cercando le risorse che creano le funzioni di scorrimento, come quelle che si trovano su questi siti:
Outpost Journal
Unfold
Looping continuo Page (non infinito di scorrimento)

Una volta che la barra di scorrimento colpisce la parte inferiore della pagina , Voglio che ritorni verso l'alto. Ho familiarità con lo scroll infinito, e questo non è quello che voglio. Ho anche trovato degli script che scriveranno/aggiungeranno lo stesso contenuto nella parte inferiore della pagina, ma nessuno che ricolleghi alla parte superiore della pagina.

+0

Basta fare la posizione di scorrimento = 0 una volta che si trova nella parte inferiore della pagina. – Leeish

risposta

10

Prova questo:

$('document').ready(function() { 
      $(document).scroll(function(){ 
      if(document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight)$(document).scrollTop(0); 
      }); 
      }); 
+0

perfetto. Grazie! –

4

risposta di Mrida stava causando il mio browser per non essere in grado di scorrere, qui è una versione modificata che ha funzionato per me:

$('document').ready(function() { 
    $(document).scroll(function(){ 
     if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) { 
     $(document).scrollTop(0); 
     } 
    }); 
    }); 
5

se si desidera scorrere infinito entrambe le direzioni utilizzano

if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) { 
    $(document).scrollTop(0) 
} else if ($(window).scrollTop() < 0) { 
    $(document).scrollTop($(document).height()) 
} 

(lo so che è una risposta in ritardo ma aiuta comunque gli utenti come me che ha appena Goo roba come questa)

+1

Il codice non funziona per me, quindi ho cambiato questa parte 'else if ($ (window) .scrollTop() <0)' da else ($ (finestra) .scrollTop() <1) ' – Beny

6

Qui una soluzione che crea un duplicato del corpo in modo che il fondo e la parte superiore possano essere visti contemporaneamente in un determinato punto in modo che la transizione sia più uniforme.

$('document').ready(function() { 

    // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website. 
    var origDocHeight = document.body.offsetHeight; 

    // now we know the height we can duplicate the body  
    $("body").contents().clone().appendTo("body"); 


    $(document).scroll(function(){ // detect scrolling 

     var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled 

     if(scrollWindowPos >= origDocHeight) { // if we scrolled further then the original doc height 
      $(document).scrollTop(0); // then scroll to the top 
     }  
    }); 

}); 
1

Aggiunta di loop scorrere indietro, aggiornamento @ risposta clankill3r. Dovrebbe essere qualcosa di simile.

$('document').ready(function() { 

// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website. 
var origDocHeight = document.body.offsetHeight; 

// now we know the height we can duplicate the body  
$("body").contents().clone().appendTo("body"); 


$(document).scroll(function(){ // detect scrolling 

    var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled 

    if(scrollWindowPos >= origDocHeight) { // if we scrolled further then the original doc height 
     $(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top 
    } else if (scrollWindowPos == 0) { // if we scrolled backwards 
     $(document).scrollTop(origDocHeight); 
    } 
}); 
}); 

Lo sto usando orizzontalmente e funziona bene. Spero che qualcuno lo trovi utile.

1

biforcato da @ clankill3r 's risposta, creare due copie del corpo, anteporre e aggiungere al corpo originale, quindi è possibile scorrere la pagina in due direzioni infinite.

$('document').ready(function() { 

    var origDocHeight = document.body.offsetHeight; 

    var clone=$("body").contents().clone(); 
    clone.appendTo("body"); 
    clone.prependTo("body"); 

    $(document).scroll(function(){ 

     var scrollWindowPos = $(document).scrollTop(); 

     if(scrollWindowPos >= origDocHeight) { 
      $(document).scrollTop(0); 
     } 
     if(scrollWindowPos <= 0) { 
      $(document).scrollTop(origDocHeight); 
     }   
    }); 
}); 
Problemi correlati