2

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)
    }
  
});

         }
});
ak_malmo
  • 97
  • 1
  • 15
  • 1
    So find the scroll position of that element? – epascarello Apr 26 '21 at 15:28
  • 1
    What kind of selector is `'document'` in `$('document')` ? Some `` element? (Invalid HTML5 by the way) Or you meant to do `$(document)` instead? – Roko C. Buljan Apr 26 '21 at 15:45
  • 1
    It's not clear from your question what you're actually trying to do – Roko C. Buljan Apr 26 '21 at 15:48
  • 1
    Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example You may also want to take the Tour: https://stackoverflow.com/tour/ – Twisty Apr 26 '21 at 16:00
  • Sorry for my question not being clear enough. I have updated with a codepen example. I wish to do something similar to the linked question. But instead of going to the top when reaching the end of the page, I would like to scroll to the top of #loop-start when #loop-end reaches the top of the window. And if possible also in the reversed order when scrolling from bottom up. – ak_malmo Apr 26 '21 at 17:11
  • 1
    You could do this as follow: ```$(document).scrollTop($('#loop-start').offset().top)```, if I get your question right. And the other way around: ```$(document).scrollTop($('#loop-end').offset().top)``` – prettyInPink Apr 26 '21 at 18:53
  • Thank you for your examples @prettyInPink! That definitely gets me in the right direction. I have created a new pen where I get this to sort of work, in one direction at least. https://codepen.io/akmalmo/pen/ZELPxje – ak_malmo Apr 26 '21 at 20:53
  • 1
    Just add the other function in the ```else``` statement and it should work. – prettyInPink Apr 27 '21 at 05:54
  • right, yes it sort of works! Thank you @prettyInPink. Only problem with this though... is that the else statement makes it so that one jumps directly to #loop-end and then #loop-start on initial scroll. So you won't be able to scroll the first bit yourself. But, perhaps I could wrap the else if in some way to make that function start only after you have scrolled past #loop-start? https://codepen.io/akmalmo/pen/YzNggJR – ak_malmo Apr 27 '21 at 08:24
  • Also – is there not a way to more easily calculate the height so that it is responsive? Now if one resizes the browser window it breaks – ak_malmo Apr 27 '21 at 08:27
  • 1
    You can always wrap it in a function and also included in window resize event. – prettyInPink Apr 27 '21 at 08:46
  • I consider this somewhat solved. At least I have it working looping within those div id's. Thank you @prettyInPink! I am moving over to ask about triggering this inside a function in a new question here: https://stackoverflow.com/questions/67295219/trigger-function-when-div-is-reached-and-also-on-resize?noredirect=1&lq=1 – ak_malmo Apr 28 '21 at 07:33

0 Answers0