jQuery for a single page site that scrolls automatically after hitting a play button

Question

I've marked up a simple one-page site that has a absolute positioned nav-bar at the top of the page for scrolling to sections of the page using anchors. You can see my terrible code live here:

http://codepen.io/anon/pen/nlcsK

You'll also notice that there is a 'Play' div at the top of the page as what I'd really like to do is to have the page automatically scroll to different anchors at different times after you hit 'Play'.

Unfortunately, my jQuery is even worse that my HTML/CSS so I have no idea how to do this! Any (step by step) help would be much appreciated!

<nav id="nav">
  <a href="#section-one">One</a>|
  <a href="#section-two">Two</a>|
  <a href="#section-three">Three</a>|
  <a href="#section-four">Four</a>
</nav>

<div id="section-one" class="cover">
  <h1 id="play">Play</h1>
</div>

<div id="section-two" class="cover">
</div>

<div id="section-three" class="cover">
</div>

* {
  margin:0px;
  padding:0px;
  height:100%;
}

#nav {
  position:fixed; 
}

#section-one { 
  background-color:white;
}

#section-two { 
  background-color:orange;
}

#section-three { 
  background-color:grey;
}

#section-four { 
  background-color:green;
}

.cover {
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

#play {
  width:60px;
  height:60px;
  background-color:red;
  margin: 0px auto;
}

As a general rule, it's better if you also copy the relevant code into your question; this helps the question stay relevant even if the link breaks at a later date. Thanks! — StackExchange What The Heck, Dec 30 '13 at 17:52
See this question here: http://stackoverflow.com/questions/6677035/jquery-scroll-to-element What you can do is use the example given there and combine it with the `.delay()` function to time your scrolls. http://api.jquery.com/delay/ — Dryden Long, Dec 30 '13 at 18:00
possible duplicate of [Smooth JavaScript/jQuery scroll to element](http://stackoverflow.com/questions/5089999/smooth-javascript-jquery-scroll-to-element) — StackExchange What The Heck, Dec 30 '13 at 18:03

score 0 · Answer 1 · answered Dec 30 '13 at 18:00

If you add this jQuery-Code:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Everytime you hit a HTML anchor link the action will be overidden and jquery will scroll to it.

Same way at doing an animation for the play button. You have to get the targets position, then you can scroll to it:

$(document).ready(function() {
    $('.play').on('click', function() {
        $target = $(yourelement);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;

            //do this for the next one
            $target = $(yourelement);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 1000, 'swing', function () {
                window.location.hash = target;
                //and probably for another one here
            });
        });
    }
});

where 1000 is the time it needs to scroll in miliseconds, you can change that.

jQuery for a single page site that scrolls automatically after hitting a play button

1 Answers1