Question

I basically have a div with set dimensions and overflow: hidden. That div contains 7 child divs (but only shows one at a time) that I would like to be smoothly scrolled through vertically when their respective links are hovered.

However, the first section (div) doesn’t have a link and is the default section when no link is hovered.

Take a look at this jsFiddle to see a basic structure of what I’m talking about: http://jsfiddle.net/YWnzc/

I’ve attempted to accomplish this with jQuery scrollTo but haven’t been able to get it to work.

Any help would be greatly appreciated. Thanks.

Answer 1

Something like this?

http://jsfiddle.net/YWnzc/5/

code:

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) {
    var i, self = this,
    pos;

    if (e.type == "mouseleave") {
    i = 0;
    }
    else {
    //Find out the index of the a that was hovered
        jQuery("#nav a").each(function (index) {
            if (self === this) {
            i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment
            return false;
            }
        });
    }

    //Find out if the index is a valid number, could be left undefined
    if (i >= 0) {

        //stop the previous animation, otherwise it will be queued
        jQuery("#wrapper").stop().animate({
        scrollTop: i * 200
        }, 500);
        //I would retrieve .offsetTop, but it was reporting false values :/
    }

    e.preventDefault();
});