jQuery desplazarse a div en vuelo estacionario y regresar al primer elemento

Question

Básicamente tengo un div con dimensiones de conjunto y overflow: hidden. Ese div contiene 7 divs para niños (pero solo muestra uno a la vez) que me gustaría que se desplacen suavemente verticalmente cuando se ciernen sus respectivos enlaces.

Sin embargo, la primera sección (div) no tiene un enlace y es la sección predeterminada cuando no se coloca ningún enlace.

Tome un vistazo a este jsFiddle ver una estructura básica de lo que estoy hablando: http://jsfiddle.net/YWnzc/

He tratado de lograr esto con jQuery scrollTo pero no han sido capaces de conseguir que funcione.

Cualquier ayuda sería muy apreciada. Gracias.

Answer 1

¿Algo como esto?

http://jsfiddle.net/YWnzc/5/

código:

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) { 
    var i, self = this, 
    pos; 

    if (e.type == "mouseleave") { 
    i = 0; 
    } 
    else { 
    //Find out the index of the a that was hovered 
     jQuery("#nav a").each(function (index) { 
      if (self === this) { 
      i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment 
      return false; 
      } 
     }); 
    } 

    //Find out if the index is a valid number, could be left undefined 
    if (i >= 0) { 

     //stop the previous animation, otherwise it will be queued 
     jQuery("#wrapper").stop().animate({ 
     scrollTop: i * 200 
     }, 500); 
     //I would retrieve .offsetTop, but it was reporting false values :/ 
    } 

    e.preventDefault(); 
}); 

Answer 2

FYI: Ese JSFIDDLE que me enviaste fue al framework MooTools, no jQuery ... fyi. (Podría ser la razón por la que no trabaja

Copia y pega este código tal y funcionará en jQuery para el desplazamiento animada

Prueba esto para el desplazamiento suave dentro del DIV, he comprobado? -. Funciona muy bien Usted.

$(function() { 

    function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('#wrapper'); 

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 

     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
      && (location.hostname == this.hostname || !this.hostname) 
      && this.hash.replace(/#/,'')) { 

       // Ensure target exists 
       var $target = $(this.hash), target = this.hash; 
       if (target) { 

        // Find location of target 
        var targetOffset = $target.offset().top; 
        $(this).click(function(event) { 

         // Prevent jump-down 
         event.preventDefault(); 

         // Animate to target 
         $(scrollElem).animate({scrollTop: targetOffset}, 400, function()  { 

          // Set hash in URL after animation successful 
          location.hash = target; 

         }); 
        }); 
       } 
     } 

    }); 

    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 

}); 

FYI:. el crédito para este código no va a mí como un desarrollador individual, aunque me hizo modifico ligeramente el código el propietario y creador de este código es Chris Coyier y se puede encontrar más información sobre el código de desplazamiento aquí: http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

$("#nav a").hover(function() { 
    var sectionName = $(this).attr("href"); 
    var sectionPos = $(sectionName).offset().top; 
    var wrapperPos = $("#wrapper").offset().top; 
    var wrapperScroll = $("#wrapper").scrollTop(); 
    var scrollPos = sectionPos - wrapperPos + wrapperScroll; 
    $("#wrapper").stop().animate({scrollTop:scrollPos}, 600); 
}, function() { $("#wrapper").stop().animate({scrollTop:0}, 600); }); 

Answer 4

Aquí está un ejemplo de trabajo: http://jsfiddle.net/YWnzc/7/

Y el código (bastante similar al de Rizzle, con un par de cambios que voy a explicar):

$('a').hover(function(){ 
    var selector = $(this).data('section'); 
    var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129; 
    $('#wrapper').animate({scrollTop: scrollAmount}, 250); 
},function(){ 
    $('#wrapper').animate({scrollTop: 0}, 250); 
}); 

Primero, var selector = $(this).data('section'); bec ause en jsFiddle, el atributo href devolvía la ruta completa de la página + el hash. Así que lo cambié a un atributo de datos html5 (data-section).

La siguiente línea es similar a la de rizzle, excepto que tomamos el desplazamiento de la sección y lo agregamos al valor actual scrollTop del #wrapper. Como él señaló, todavía hay algunos problemas de compensación extraños, y descubrí que restar 129 dio el truco. Si bien este número 129 podría parecer algo que probablemente se rompa, probé cambiando el tamaño de las secciones, haciendo que no fueran iguales, etc., y continuó funcionando. Estoy usando Chrome, y tal vez un navegador que no sea webkit necesitaría una constante diferente para restar. Pero parece que el número 129 es al menos algún tipo de constante.

El resto debe ser bastante autoexplicativo.

Una cosa a destacar: a medida que mueve el cursor sobre las <a> etiquetas, el contenido de la #wrapper div parecerá a saltar alrededor, pero eso es sólo porque la parte mouseleave del evento activable brevemente se desencadena como se mueve el cursor. Estoy seguro de que puedes resolverlo :):