Forgive me if this was asked, but I searched all day here and did not see a question related to my specific problem.
I am creating a single page website in parallax style with a navigation bar using a fixed position so that users can quickly navigate to different sections of the page.
I'm currently trying to implement the scrollTo jQuery plugin ( flesler / jquery.scrollTo - Github ) to get a nice smooth animated scroll.
This is the 5th or 6th jQuery method that I implemented to make this effect work without success. The scrollTo method seems to be closest to work, but it still won't work.
This does not work at all on Chrome 42.0.2311.90 This does not work on Firefox 37.0.2 It works on Safari 5.1.10, but I could not check the latest version of Safari. In addition, Safari 5.1.10 is not yet displayed. I also did not have access to a computer with IE.
The test site is at http://revolt-designs.com/parallax/
This is how I call the script:
$(document).ready(function(){
$('#nav-links li a').click(function() {
$.scrollTo($(this).attr('href'), {duration: 3000});
});
});
And the links are formatted as follows:
<div id="nav">
<ul id="nav-links">
<li><a href="#group2">About</a></li>
<li><a href="#group4">News</a></li>
<li><a href="#group6">Events</a></li>
<li><a href="#group7">Contact</a></li>
</ul>
</div>
For simplicity, anchors point to divs located on the page, i.e.:
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
Lorem Ipsum
</div>
</div>
Hope someone catches something small and light that I miss. Thank you To be clear, I am not asking for an alternative script that I use. I ask for help to find the main problem that prevents any smooth scroll scripts from working on my site.