简体   繁体   中英

Javascript/Jquery: code not repeating with any loop I've tried

Is there a reason why I am unable to loop the autoscroll function in the following code?

$(window).load(function(){
    autoScroll();
});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

I've already tried several answers to other simular questions on this site with no success.

EDIT:

To put it simply I have two html pages, index.html and iframe.html. Index.html has a iframe pointing to iframe.html. The above code is running on iframe.html. The above code scrolls down the webpage contained in the iframe. What I want it to do is go back to the top of the page after it finishes scrolling to the bottom and then repeat for 'X' amount of times.

I've already tried the following:

$(window).load(function(){
  var i = 0;
  do
    autoScroll();
    i++
  while(i<10);

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  var i = 0;
  while(i<10){
    autoScroll();
    i++
  };

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  for(i<10; i<10; i++){
    autoScroll();
  };

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

$(window).load(function(){
  setInterval(function(){
    autoScroll();
  }, 3000)

});

function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

    $(window).scroll(function() {   
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(window).scrollTop(0);
        }
    });
}

I've also tried all of the above shown above but around the contents of the autoScroll function like this:

$(window).load(function(){
    autoScroll();
});

function autoScroll()
    var i = 0;
    do
        $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear');

        $(window).scroll(function() {   
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               $(window).scrollTop(0);
           }
        });
    i++
    while(i<10);
}

Use a recursive function: by calling autoScroll(); after the animation is completed:

autoScroll();
function autoScroll(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22500,'linear',function(){
     $(window).scrollTop(0);
             autoScroll();
    });
}

demo: https://jsfiddle.net/bbdsj2bg/1/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM