javascript - jQuery scrollTo not working Chrome/Firefox -


forgive me if has been asked, i've been searching day on here , have not seen question relating specific problem.

i'm building 1 page parallax-style website navigation bar utilizing fixed position allow users jump different sections of page.

currently i'm trying implement scrollto jquery plugin (flesler/jquery.scrollto - github) give nice smooth animated scroll.

this 5th or 6th different jquery method i've implemented make effect work no success. scrollto method seems closest working, still won't work.

it not work @ on chrome 42.0.2311.90 not work @ on firefox 37.0.2 work on safari 5.1.10, haven't been able check on newest version of safari. site doesn't render right on safari 5.1.10 yet. have not had access computer ie.

the test site located @ http://revolt-designs.com/parallax/

here how i'm calling script:

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

and links formatted 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 sake of simplicity, anchors pointing divs located on 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 catch small , easy i'm missing. thanks. clear, i'm not asking alternative script i'm using. i'm asking finding underlying issue that's preventing smooth scrolling scripts working on site.

change code scroll on .parallax element:

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

here fiddle (used html webpage)


for sake of browser compatibility, consider changing height: 100vh; in css 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});     }); }); 

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -