Question

I’m using the JQuery scrollTo plugin on our one-page site to vertically scroll between the different sections.

The scroll works well in all browsers except iOS Safari which scrolls but is very jerky. I’m using a number of other Jquery plugins on the page so it may be a conflict with one of these.

If anyone knows an alternative to scrollTo that works smoothly on the iPad or can suggest where to start tackling the issue I’d appreciate the help. I’ve tried this solution but without success.

Answer 1

Thanks for the tip Arnar.

Your advice put me on the right path and with the help of this JSFiddle i now have exactly the smooth scroll i wanted to achieve with smooth animated scroll to each section and automatic highlighting of the active menu item.

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});