Animate -> Slide to left not working jQuery

Question

I have this div: "id1" and I want to slide to this "id2"

I have a button on <div id="id1"> that has:

<a href="#id2">next</a>

and I have this script:

$(function() {
    $('#next-button2').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 2000);

        event.preventDefault();
    });
});

That I took from this Site , but its not working, any ideas why?

Answer 1

Your script is looking to bind the animation function to a DOM object with id = next-button2

Change your HTML to:

<a id="next-button2" href="#id2">next</a>

so that your JQuery can bind the click function to the right DOM object.

Also, you'll need to make the actual animation bind to the correct object, so change:

$('html, body')

to:

$('#id1')

If you want a more in depth answer you may want to provide more HTML, JS / JQ, and CSS to look at.

Answer 2

It works for me:

http://jsfiddle.net/hA9Sp/1/

I think you are just missing the id "next-button2" in your link. I haven't edited any of the javascript.

My test HTML:

<div style="position:relative;height:100px;width:2000px;background-color:yellow;">
    <div id="id1" style="position:absolute;left:0px;">
        <a id="next-button2" href="#id2">next</a>
    </div>
    <div id="id2" style="position:absolute;right:0px;">
        id2
    </div>
</div>

If after that it still doesn't work, make sure that your javascript does actually run. Add an alert("test"); or console.log("test); and see if anything happens.