Endless looping page

Viewed 129

I am looking to do something similar to what is solved here: Continuous Looping Page (Not Infinite Scroll)

But I am trying to make it so that when you reach a certain div ID (#loop-end), you go to another div ID (#loop-start).

Some examples of what I have tried are:

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

Which you can see in an example here: https://codepen.io/akmalmo/pen/VwPRMaK

I am also exploring if one could do something like this below - thanks for the nudge @prettyInPink – Only problem I have with this, is to understand how I could to the same in the opposite direction + to also make it work on window resize https://codepen.io/akmalmo/pen/ZELPxje

 var loopend = $('#loop-end').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
});

Basically. First code example, where one can endlessly scroll in both directions is what I am looking for. But looping within #loop-start and #loop-end rather than document end and document top. I have it working here, I only need to make it work on resize as well as not jumping to loop-end/start straight away on page load

EDIT

Showing my latest exploration. I am really close with this. Last thing I am struggling with is wrapping it all in a function (+ recalculating the offset value on window resize, puh), to make it start when a specific div is reached. But doing so conflicts with the looping


var element_position = $('#loop-init').offset().top;

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {


 var loopend = $('#loop-end').offset().top;
 var loopstart = $('#loop-start').offset().top;

$(document).scroll(function() {
    if ( $(document).scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
  else if ( $(document).scrollTop() <= loopstart ) {
    $(document).scrollTop($('#loop-end').offset().top)
    }
  
});

         }
});
0 Answers
Related