Scrolling jQuery Chrome / Firefox not working

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

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

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.

+4
2

, .parallax:

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

( HTML -)


height: 100vh; css, .height():

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

jquery jquery UI, , 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
  });
});
0

Source: https://habr.com/ru/post/1584653/


All Articles