El complemento JQuery scrollTo se convierte en Jerky en iOS

Question

Estoy usando el JQuery scrollTo plugin en nuestro one-page site para desplazarme verticalmente entre las diferentes secciones.

El desplazamiento funciona bien en todos los navegadores excepto iOS Safari que se desplaza pero es muy desigual. Estoy usando otros plugins de Jquery en la página, por lo que puede haber un conflicto con uno de estos.

Si alguien conoce una alternativa para scrollTo que funciona sin problemas en el iPad o puede sugerir dónde empezar a abordar el problema, agradecería la ayuda. Lo intenté this solution pero sin éxito.

Answer 1

Gracias por el consejo Arnar.

Su consejo me puso en el camino correcto y con la ayuda de this JSFiddle ahora tengo exactamente el smooth scroll i wanted to achieve con desplazamiento suave animado a cada sección y resaltado automático del elemento del menú activo.

// 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"); 
    }     
}); 

Answer 2

prueba este

$.scrollTo(SELECTOR, 800, { 
    'axis':'y' 
});