jQuery scorrere per divare al passaggio del mouse e tornare al primo elemento

Question

Fondamentalmente ho un div con dimensioni impostate e overflow: hidden. Quel div contiene 7 div per i bambini (ma mostra solo uno alla volta) che vorrei scorrere senza problemi in verticale quando i loro rispettivi link sono aleggiati.

Tuttavia, la prima sezione (div) non ha un collegamento ed è la sezione predefinita quando nessun collegamento è al passaggio del mouse.

Date un'occhiata a questo jsFiddle di vedere una struttura di base di che cosa sto parlando: http://jsfiddle.net/YWnzc/

ho tentato di ottenere questo risultato con jQuery scrollTo ma non sono stati in grado di farlo funzionare.

Qualsiasi aiuto sarebbe molto apprezzato. Grazie.

Answer 1

Qualcosa di simile?

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

codice:

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: Quel JSFIDDLE che mi hai inviato è andato al framework MooTools, non jQuery ... fyi. (Potrebbe essere il motivo per il relativo funzionamento

Copia e incolla questo codice esattamente e funzionerà in jQuery per lo scorrimento animato

Prova questo per lo scorrimento uniforme all'interno del DIV, ho provato -?. Funziona grande Te.

$(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:. credito per questo codice non va a me come un singolo sviluppatore, anche se ho fatto un po 'modificare il codice di il proprietario e creatore di questo codice è Chris Coyier e si possono trovare informazioni su questo codice di scorrimento qui: 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

Ecco un esempio di lavoro: http://jsfiddle.net/YWnzc/7/

E il codice (abbastanza simile a Rizzle di, con un paio di modifiche che vi spiegherò):

$('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); 
}); 

Primo, var selector = $(this).data('section'); bec ause in jsFiddle, l'attributo href stava restituendo il percorso completo della pagina + l'hash. Quindi l'ho modificato in un attributo di dati html5 (data-section).

La riga successiva è simile a rizzle, tranne che prendiamo l'offset della sezione e lo aggiungiamo all'attuale valore scrollTop dello #wrapper. Come ha sottolineato, ci sono alcuni strani problemi di offset in corso, e ho scoperto che la sottrazione di 129 ha fatto il trucco. Mentre questo numero 129 potrebbe sembrare qualcosa che potrebbe rompersi, ho provato a cambiare le dimensioni delle sezioni, rendendole non uguali, ecc., E ha continuato a funzionare. Sto usando Chrome, e forse un browser non webkit avrebbe bisogno di una costante diversa da sottrarre. Ma sembra che quel numero 129 sia almeno un qualche tipo di costante.

Il resto dovrebbe essere abbastanza auto-esplicativo.

Una cosa da notare: come si sposta il cursore sopra le <a> tag, il contenuto del #wrapper div sembrerà a saltare in giro, ma questo è solo perché la parte mouseLeave dell'evento hover brevemente viene attivato durante il movimento del cursore. Sono sicuro che lo puoi risolvere :)