¿Cómo se anima FB.Canvas.scrollTo?

Question

He creado una aplicación que tiene un tamaño de conjunto (alrededor de 2.000 px de altura) y un menú que llama a FB.Canvas.scrollTo para ayudar al usuario a navegar por la página larga.

¿Hay alguna manera de agregar un efecto de desplazamiento suave? Facebook no ofrece ninguna solución en su blog de desarrollador.

Answer 1

Usando @ método de Jonny, usted puede hacer esto un poco más simplemente con

function scrollTo(y){ 
    FB.Canvas.getPageInfo(function(pageInfo){ 
      $({y: pageInfo.scrollTop}).animate(
       {y: y}, 
       {duration: 1000, step: function(offset){ 
        FB.Canvas.scrollTo(0, offset); 
       } 
      }); 
    }); 
} 

Answer 2

Una forma de hacerlo es obtener la posición Y actual y luego colocarla en la posición Y. Ejecute un bucle for con un setTimeout que llevará al usuario a la posición Y final.

Answer 3

acabo de utilizar la técnica de Francisco e implementado una versión de jQuery

$('html,body').animate(
    {scrollTop: $(".scroll_to_me").offset().top}, 
    {duration: 1000, step: function(top_offset){ 
    FB.Canvas.scrollTo(0, top_offset + 30); 
    } 
}); 

Es necesario sustituir el .scroll_to_me con el selector que desea desplazarse a. También agregué en el + 30 al desplazamiento ya que el iframe no comienza en la parte superior de la página, es posible que desee ajustar esto.

Answer 4

Acabo de tener el mismo problema hoy - Se me ocurrió un poco de javascript que utiliza el método animate de jQuery que proporciona cierta relajación: el desplazamiento sigue siendo un movimiento brusco (supongo que es por el FB. Canvas.scrollTo proxy). De todos modos, aquí está el fragmento:

function scrollToTop() { 
    // We must call getPageInfo() async otherwise we will get stale data. 
    FB.Canvas.getPageInfo(function (pageInfo) { 

     // The scroll position of your app's iFrame. 
     var iFrameScrollY = pageInfo.scrollTop; 

     // The y position of the div you want to scroll up to. 
     var targetDivY = $('#targetDiv').position().top; 

     // Only scroll if the user has scrolled the window beneath the target y position. 
     if (iFrameScrollY > targetDivY) { 
      var animOptions = { 

       // This function will be invoked each 'tick' of the animation. 
       step: function() { 
        // As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to 
        // perform the scroll for us. 
        FB.Canvas.scrollTo(0, this.y); 
       }, 

       // How long you want the animation to last in ms. 
       duration: 200 
      }; 

      // Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current 
      // scroll position) to the y position of your target div. 
      $({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions); 
     } 
    }); 
}