jQuery scrollTo not working Chrome/Firefox

Question

Forgive me if this has been asked, but I've been searching all day on here and have not seen any question relating to my specific problem.

I'm building a one page parallax-style website with a navigation bar utilizing a fixed position to allow users to quickly jump to different sections of the page.

Currently I'm trying to implement the scrollTo jQuery plugin ( flesler/jquery.scrollTo - Github ) to give a nice smooth animated scroll.

This is the 5th or 6th different jQuery method I've implemented to make this effect work with no success. The scrollTo method seems to be the closest to working, but it still won't work.

It does not work at all on Chrome 42.0.2311.90 It does not work at all on Firefox 37.0.2 It does work on Safari 5.1.10, but I haven't been able to check on the newest version of Safari. Also the site doesn't render right on Safari 5.1.10 yet. I also have not had access to a computer with IE.

The test site is located at http://revolt-designs.com/parallax/

Here is how I'm calling the script:

$(document).ready(function(){
    $('#nav-links li a').click(function() {
        $.scrollTo($(this).attr('href'), {duration: 3000});
    });
});

And the links are formatted this way:

<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 the sake of simplicity, the anchors are pointing to divs located on the page, ie:

<!-- GROUP 2 -->
<div id="group2" class="parallax__group">   
    <div class="parallax__layer parallax__layer--base">
        Lorem Ipsum
    </div>      
</div><!-- end GROUP 2 -->

Hopefully someone will catch something small and easy that I'm missing. Thanks. To be clear, I'm not asking for an alternative to the script I'm using. I'm asking for help finding the underlying issue that's preventing any smooth scrolling scripts from working on my site.

Answer 1

Change your code to scroll on the .parallax element:

$(document).ready(function() {
    $('#nav-links li a').click(function() {
        $('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
    });
});

Here is a fiddle (Used the HTML from your webpage)

---

For the sake of browser compatibility, you could consider changing height: 100vh; in your css to perhaps use .height() instead:

$(document).ready(function() {
    height = $(window).height();
    $('.parallax').css('height',height);
    $('#nav-links li a').click(function() {
        $('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
    });
});

Answer 2

This snippet required jquery and jquery UI, you can remove the easing part at the end if you do not want to include jquery UI

    $(document).ready(function(){
  $('#nav ul li a').on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');

    //changing the value of offsetValue will help account for fixed headers or whatever.
    //EDIT: used data-offset to allow for multiple offsets defualt is 0.

    offsetValue = $(this).data('offset') | 0;

    $('html, body').animate({
      scrollTop: $(target).offset().top-offsetValue
     },
     {
      duration: 2000,
      easing: "easeOutQuint"  
      });
    //number at the end here changes the speed, slower = higher
  });
});