0

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;
});
2
  • I didn't see any 'a' inside your html Commented May 2, 2014 at 14:52
  • @jhyap they're within the lis within the navigation class. Commented May 2, 2014 at 14:53

3 Answers 3

4

remove overflow-x: hidden; and it will work

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

Sign up to request clarification or add additional context in comments.

3 Comments

It breaks the navigational bar.
@TaylerKing then add it where needed, and not to the body, html otherwise scrollTop will not work.
This no longer works. The jsfiddle does not smooth scroll
0

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>

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.