Window scroll to DIVs

Good evening,

I have been trying to figure this problem out for a while now but I cannot seem to find enough resources online for a viable solution - maybe I'm not looking hard enough.

Anyway, what I am trying to do is have 6 divs that are all over the page - making the window scrollable. I intend on having a navigation bar, that is z-indexed on top of everything else, containing links to fire the scroll.

All I need to understand is the jQuery part of it and a开发者_如何学Golso what files I would need to reference.

PS. If you think you know your stuff, would you mind telling me if floating divs would be readable by jQuery's "offset" function? I was contemplating using the a table and storing the different divs in the cells of that table. :S I hate tables...

Thank you for your help.

---

So are you saying your problem is you have some DIVs and you want to scroll to them from navigation links?

You don't need JQuery, you don't even need Javascript. Just put an anchor tag at the start of each DIV and navigate to that.

<DIV id="navigationBar">
   <a href="#section1_nav">Go to section 1</a>
   <a href="#section2_nav">Go to section 2</a>
</DIV>

<DIV id="section1">
   <a name="section1_nav"></a>
</DIV>

<DIV id="section2">
   <a name="section2_nav"></a>
</DIV>

---

The easiest way for you to position <div>'s would be with CSS absolute positioning, which you can learn more about in this guide. This is the most consistently displayed across browsers and would give you fine-grained control over where the containers were positioned:

<ul id="nav">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>     
</ul>
<div id="first">First content container</div>
<div id="second">Second content container</div>
<div id="third">Third content container</div>

With CSS along the following lines:

ul {
    position: fixed;
    z-index: 2;
    top: 20px;
    right: 20px;
}

div {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;    
}

#first {
    top: 10px;
    left: 10px;
}

#second {
    top: 1000px;
    left: 500px;
}

#third {
    top: 500px;
    left: 100px;
}

Then to actually scroll to the different <div>'s on click, you could use the jQuery scrollTo plugin:

$('a').click(function(e) {
    // Stop default link click from occuring
    e.preventDefault();

    // Scroll to the position using the jQuery scrollTo plugin
    // Element id is taken from link's href attribute
    $(window).scrollTo($(this).attr('href'), {duration: 500});
});

You can see a simple example in action here.