Auto-Scroll page after set time

Design help Custom code
1

Hey guys,

On my front page I have a ~15 sec video that loops. I’m trying to see if there’s a way to auto-scroll the page down to the next section on my page after 14 seconds, before video loops. A friend showed me the follow javascript, which SORT OF works:

$(document).ready(function () {
  // Handler for .ready() called.
  setTimeout( function() {
    $('html, body').animate({
      scrollTop: $('#jump').offset().top
    }, 1000);
  }, 14000);
});

The problem is that if the user should decide to scroll past the #jump point before the video is done playing… the script will automatically scroll back up the page.

Is there a similar script that can solve this? Or maybe some sort of code that can tell the script to not run if the user have already scrolled/scrolled past #jump?

Live site
Read-Only

Thanks in advance :slight_smile:

2 
$(function() {
  setTimeout(function() {
    var jumpPos = $('#jump').offset().top;
    if($(document).scrollTop() <= jumpPos)
      $('html, body').animate({
        scrollTop: jumpPos
      }, 1000);
  }, 14000);
});
1 Like
3

Amazing. That solved it perfectly!! Thank you @samliew !!

4

@samliew Hey man. Do you know if there’s any way to start the 14 sec counter AFTER the video element has loaded?

Right now, if you’re a slower connection… the counter starts before the video has loaded, and auto-scrolls before the loop is finished.

5

Yup, you have to wrap your timeout in the video ready function

http://stackoverflow.com/q/13864795/584192

6

It should be as simple as this:

  $(document).ready(function () {
    var myVideo = $('video').first().get(0);
    myVideo.addEventListener('loadeddata', function() {
      setTimeout( function() {
        $('html, body').animate({
          scrollTop: $('#jump').offset().top
        }, 1000);
      }, 14000);
    }, false);
  });
7

I think this actually solved it! It’s hard to really test because the video loads so swiftly on my computer. I’ve asked a few other people to try it out, though, and no one has had any issues with it so far!

Thank you VERY much for your help! It is very much appreciated.

Best,

Joakim

8

Glad I could help. You can always find me here if you need custom work: http://webflowexpert.com

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.