Question

I have a slider that bounces back and forth between divs when you click on a link. It works all the way up until you add overflow: hidden, and then everything breaks!

I created a demo for anyone to look at. You’ll notice it works, but try to add overflow: hidden to the .clickWrapper div to hide the divs sliding in and it breaks. It will scroll past other divs when you click on the one you want.

http://jsfiddle.net/z67tZ/

$(function() {
    $(".clickIt a").click(function() {
        var linked = $(this).attr("href");
        var pos = $(linked).position();
        $(".clickSlider").stop().animate({
            left: -pos.left,
        }, 500);
    });
});

<div id="wrapper">
    <div class="clickIt">
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
    </div>
    <div class="clickWrapper">
        <div class="clickSlider">
            <div id="one">one</div>
            <div id="two">two</div>
            <div id="three">three</div>
        </div>
    </div>
</div>

#wrapper {margin: 0 auto; width: 200px;  }
.clickWrapper {background:red; position:relative; overflow:hidden; background-color: #CCC; height: 200px; }
.clickSlider { position: relative; width: 600px; }
#one, #two, #three { float: left; width: 200px; }

Answer 1

Try preventing the default hashchange, like so:

$(".clickIt a").click( function (e) {
    e.preventDefault();
    var linked = $(this).attr("href"),
        pos = $(linked).position().left;

    $(".clickSlider").stop().animate({left: -pos}, 500 );
});

​
FIDDLE

I’m not completely sure why this happens ??

My 2cents is that it is the browsers native function of trying to scroll to any anchor that matches the href attribute that is clicked when preceeded by a hash.

This causes the position to be messed up as the page tries to scroll down to the element that has the same anchor as the href.

When using a href value with a hash and wich matches an elements ID for anything other than scrolling, adding preventDefault (or return false for that matter even though there is no need to stop any propagation here) is always a good idea to avoid freaky bugs like this one.