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: /

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

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/J7sxD/5/

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

• javascript
• jquery
• html

• I didn't see any 'a' inside your html – jhyap Commented May 2, 2014 at 14:52
• @jhyap they're within the lis within the navigation class. – Kondax Design Commented May 2, 2014 at 14:53

3 Answers 3

remove overflow-x: hidden; and it will work

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

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./flesler/jquery.localScroll/releases

Add the two javascript references:

    <script type="text/javascript" src="http://ajax.googleapis./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>

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