2013-06-07 15 views
12

मैं संसाधन है कि लोगों को इन साइटों पर पाया की तरह स्क्रॉल कार्यों बनाने के लिए देख रहा हूँ:
Outpost Journal
Unfold
सतत पाशन पृष्ठ (नहीं अनंत स्क्रॉल)

एक बार स्क्रॉल पट्टी पृष्ठ के नीचे हिट , मैं इसे शीर्ष पर वापस लूप करना चाहता हूं। मैं अनंत स्क्रॉल से परिचित हूं, और यह वही नहीं है जो मैं चाहता हूं। मुझे स्क्रिप्ट भी मिली हैं जो पृष्ठ के निचले हिस्से में एक ही सामग्री को लिख/जोड़ती हैं, लेकिन कोई भी पृष्ठ के शीर्ष पर वापस लूप नहीं करता है।

+0

पेज के निचले हिस्से में बस स्क्रॉल स्थिति = 0 बना लें। – Leeish

उत्तर

10

इस प्रयास करें:

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

सही। धन्यवाद! –

4

mrida के जवाब पैदा कर रहा था अपने ब्राउज़र के लिए नहीं स्क्रॉल करने के लिए सक्षम हो, यहाँ एक संशोधित संस्करण है कि मेरे लिए काम किया है दोनों दिशाओं का उपयोग

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

(मुझे पता है कि यह देर से उत्तर है लेकिन यह अभी भी मेरे जैसे उपयोगकर्ताओं की मदद करता है जो सिर्फ goo इस तरह की चीजें)

5

आप में अनंत स्क्रॉल चाहते हैं:

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

आप कोड मेरे लिए काम नहीं करते हैं, इसलिए मैंने इस भाग को और बदल दिया है, अगर ($ (विंडो) .scrollTop() <0) 'और अगर ($ (विंडो) .scrollTop() <1)' – Beny

6

यहां एक समाधान है जो शरीर का डुप्लिकेट बनाता है ताकि नीचे और शीर्ष एक निश्चित बिंदु पर एक ही समय में देखा जा सके ताकि संक्रमण आसान हो।

$('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

लूप स्क्रॉल को पीछे छोड़कर, @ clankill3r उत्तर को अपग्रेड करना। यह ऐसा कुछ होना चाहिए।

$('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); 
    } 
}); 
}); 

मैं इसे क्षैतिज रूप से उपयोग कर रहा हूं और यह ठीक काम कर रहा है। उम्मीद है कि किसी को यह उपयोगी लगेगा।

1

@ clankill3r के उत्तर से फोर्क किया गया, शरीर की दो प्रतियां बनाएं, मूल शरीर को प्रीपेन्ड करें और संलग्न करें, फिर आप पेज को दो दिशाओं में अंत तक स्क्रॉल कर सकते हैं।

$('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); 
     }   
    }); 
}); 
संबंधित मुद्दे