Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Continuous Looping Page (Not Infinite Scroll)

I'm looking for resources that create scrolling functions like the ones found on these sites:
Outpost Journal
Unfold

Once the scroll bar hits the bottom of the page, I want it to loop back to the top. I'm familiar with with the infinite scroll, and this is not what I want. I've also found scripts that will write/add the same content to the bottom of the page, but none that loop back to the top of the page.

like image 340
Brian Metcalf Avatar asked Jun 07 '13 22:06

Brian Metcalf


People also ask

What is continuous scrolling?

Share this article: Infinite scrolling is a listing-page design approach which loads content continuously as the user scrolls down. It eliminates the need for pagination — breaking content up into multiple pages.

What is endless scrolling called?

What Is Infinite Scroll? A web design technique where, as the user scrolls down a page, more content automatically and continuously loads at the bottom, eliminating the user's need to click to the next page. The idea behind infinite scroll is that it allows people to enjoy a frictionless browsing experience.


2 Answers

Try this:

   $('document').ready(function() {
             $(document).scroll(function(){
             if(document.documentElement.clientHeight + 
             $(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
             });
          }); 
like image 89
mrida Avatar answered Sep 30 '22 07:09

mrida


if you want infinite scroll in both directions use

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

(I know it's a late reply but it still helps users like me who just google stuff like this)

like image 30
Boris Avatar answered Sep 30 '22 08:09

Boris