JavaScript Smooth Scroll not working

Question

I'm attempting to create a smooth scrolling page, but it seems to not work. If I remove the smooth scrolling aspect of my site, the anchor automatically jumps to the div element like usual.

I have attached a JSFiddle: http://jsfiddle.net/J7sxD/5/

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

Answer 1

remove overflow-x: hidden; and it will work

See here http://jsfiddle.net/acidrat/Wt2rp/1/

Answer 2

Taylor, your jsfiddle sample worked just fine for me, but I'll share an easier way to do the smooth scroll. Use jQuery and the jQuery.localScroll plugin.

Download the latest smoothscroll.js: https://github.com/flesler/jquery.localScroll/releases

Add the two javascript references:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script> 

Then make sure to add the class "smoothScroll" to your <a> links, like this:

<a href="#anchor1" class="smoothScroll">Jump to Page Location</a>

Answer 3

I found the answer to this. Open to home page of your google chrome and type in the search bar " chrome://flags". now press ctrl+F and a search bar will appear on top right of your google home page. type in "smooth scroll" and it will direct you to smooth scroll section. click on the "default" and change it to "enable" and relaunch chrome