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;
});
Share
Improve this question
asked May 2, 2014 at 14:46
Kondax DesignKondax Design
1751 gold badge1 silver badge15 bronze badges
2
-
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
Reset to default 4remove 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