0

I study in web-making, and I need to do a parallax kind of website. I achieved to make the background scrolls slower where it was needed, but I'd like to improve it with buttons in the header that would make the page scroll to a choosen Div, and not just "teleport" you there.

So this is my HTML for the header:

<header>
    <h1>Stalwarts</h1>
    <div id='taskbar'>
        <a href="#p" class="scrollTo">Go to section 1</a>
        <a href="#d" class="scrollTo">Go to section 2</a>
        <a href="#t" class="scrollTo">Go to section 3</a>
        <a href="#q" class="scrollTo">Go to section 4</a>
    </div>
</header>

And there's my CSS:

header{
position: fixed;
padding-top: 0.4%;
padding-bottom: 0.4%;
top: 0;
width: 100%;
height: auto;
z-index: 55;
}

I would like to know how i can make either JS or JQuery to make this works and please how to integrate it. If plugins are needed, could you help me with how to instal them? I just begin with JQuery and JS! :-)

Thank you, Christophe

Christophe Viens
  • 13
  • 2

2 Answers2

0

Searched "jquery parallax scrolling" in Google and found this. http://prinzhorn.github.io/skrollr/

Eric
  • 149
  • 11
  • I am sorry if I wasn't clear, but the perspective with parallax scrolling are good, my problem is with the ''go to'' buttons. – Christophe Viens Feb 05 '15 at 02:33
  • Gotcha. I didn't read through too carefully, but I think this thread talks about what you need. Good luck. http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page – Eric Feb 05 '15 at 02:49
0

If you're using jquery already, you can make use of the $.animate function. So something like:

$('html, body').animate({
    scrollTop: $(".section").eq(sectionIndex).offset().top
}, 2000);

Here's an example jsfiddle.

Fiddles
  • 2,790
  • 1
  • 32
  • 35
  • Hi! Thank you for your help. Unfortunatly, even when I copy all your code for tests, it doesn't seems to work. I actualy am on Firefox DE so I guess it should? Maybe I'm not loading the library right? Could you provide me the code link to it? Thank you. – Christophe Viens Feb 05 '15 at 03:43
  • Have you checked out the jsfiddle I posted? The event handler setup needs to take place within a $(document).ready(...) block, as well. – Fiddles Feb 05 '15 at 03:55