I'm new in javascript, now I'm trying to do that, as the title, I've a page which has a div at the top that is as big as the page with a video in it, followed by several sections like this:

<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>

Now I need 5 seconds after the page is loaded to scroll automatically the page to #second. I've tried many ways but have failed and haven't found nothing that works properly.

Thanks

I'm new in javascript, now I'm trying to do that, as the title, I've a page which has a div at the top that is as big as the page with a video in it, followed by several sections like this:

<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>

Now I need 5 seconds after the page is loaded to scroll automatically the page to #second. I've tried many ways but have failed and haven't found nothing that works properly.

Thanks

• javascript
• jquery
• scroll
• scrollto
• scrolltop

Share Improve this question Follow asked Mar 18, 2013 at 18:39 giovannigiovanni 38822 gold badges55 silver badges1515 bronze badges 4

• 3 I've tried many ways, what ways? Show us what you have. – Matt Burland Commented Mar 18, 2013 at 18:41
• 2 What happens if the user starts scrolling on his own before 5 seconds has happened? are you going to interrupt his/her scrolling and start your own? that could be annoying. – Kevin B Commented Mar 18, 2013 at 18:41
• generally, scrolling to a particular section after x amount of time will lead to bad user experience since you don't know that the user will do in those 5 seconds. Maybe they don't want to view the video, or they pause the video and started scrolling already only to be taken to the target location after 5 seconds. – Huangism Commented Mar 18, 2013 at 18:45
• actually maybe it's better with a button.. – giovanni Commented Mar 18, 2013 at 19:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

I'm feeling generous, so I'll just give you the code this time.

$(window).load(function () {
    //normally you'd wait for document.ready, but you'd likely to want to wait
    //for images to load in case they reflow the page
    $('body').delay(5000) //wait 5 seconds
        .animate({
            //animate jQuery's custom "scrollTop" style
            //grab the value as the offset of #second from the top of the page
            'scrollTop': $('#second').offset().top
        }, 300); //animate over 300ms, change this to however long you want it to animate for
});

Use this at the end of your codes

setTimeout(function(){window.location.hash = '#second';},5000);

Note that those height:100%; are wrong.

You could use

window.location.hash = '#second';

This will set the focus. I'll leave you to put in some work on a timer solution.

Also, I would discourage any forcing of the user to focus on a particular div. This is not a very good UX practice and can lead to chasing users off your site, especially because they may not understand why the page is scrolling up.

$(function () {
    setTimeout(function () { goToSecondTab(); }, 5000);
    function goToSecondTab() {
        window.location.hash = '#second';
    }
});

Add HTML to this line in zzzzBov's script to make it work properly in FF:

$('html, body').delay(5000) //wait 5 seconds