Cómo hacer un scroll deslizable desplazable al hacer clic y al mouseover usando jQuery

Question

Utilizando el marcado a continuación, ¿cómo obtendré el div "#content" para desplazarme hacia arriba o hacia abajo cuando hago clic o coloco el cursor sobre "#scrollUp" o "#scrollDown" "etiqueta de anclaje". Desplazamiento debe ser suave preferiblemente. Si se hace clic en él, se debe desplazar una cantidad específica (para dispositivos táctiles) si mouseover puede desplazarse hasta mouseout.

<style> 
     #content { 
     overflow:auto; 
     height: 50px; /*could be whatever*/ 
       } 
    </style> 

<a id="scrollUp" href="#">up</a> 
<a id="scrollDown" href="#">down</a> 

<div id="wrapper"> 
<div id="content"> 

    <ul> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    <li>some content here</li> 
    </ul> 

</div> 
</div> 

Answer 1

Puede utilizar la función de jQuery animate para lograr un efecto de desplazamiento suave en click o mouseover:

var step = 25; 
var scrolling = false; 

// Wire up events for the 'scrollUp' link: 
$("#scrollUp").bind("click", function(event) { 
    event.preventDefault(); 
    // Animates the scrollTop property by the specified 
    // step. 
    $("#content").animate({ 
     scrollTop: "-=" + step + "px" 
    }); 
}).bind("mouseover", function(event) { 
    scrolling = true; 
    scrollContent("up"); 
}).bind("mouseout", function(event) { 
    // Cancel scrolling continuously: 
    scrolling = false; 
}); 


$("#scrollDown").bind("click", function(event) { 
    event.preventDefault(); 
    $("#content").animate({ 
     scrollTop: "+=" + step + "px" 
    }); 
}).bind("mouseover", function(event) { 
    scrolling = true; 
    scrollContent("down"); 
}).bind("mouseout", function(event) { 
    scrolling = false; 
}); 

function scrollContent(direction) { 
    var amount = (direction === "up" ? "-=1px" : "+=1px"); 
    $("#content").animate({ 
     scrollTop: amount 
    }, 1, function() { 
     if (scrolling) { 
      // If we want to keep scrolling, call the scrollContent function again: 
      scrollContent(direction); 
     } 
    }); 
} 

Ejemplo de trabajo: http://jsfiddle.net/andrewwhitaker/s5mgX/

(Tendrá deshabilitar los eventos mouseover y mouseout para ver los efectos del controlador de eventos click correctamente)

Cómo funciona:

• Utiliza la función animate mencionado anteriormente para desplazarse sin problemas por una cantidad especificada al hacer clic.
• Utiliza un indicador para habilitar el desplazamiento continuo cuando se llama al controlador de eventos mouseover del enlace, y deshabilita el desplazamiento cuando el controlador de eventos mouseout del enlace.
• Cuando se llama a scrollContent, si la bandera scrolling sigue siendo después de completar la animación, vuelva a animar en la misma dirección. El parámetro de la función de devolución de llamada de animate nos permite realizar una acción después de que se completa la animación.

Answer 2

Pruebe usar JavaScript en lugar de jQuery para esta tarea. Google la función scrollBy() como en window.scrollBy()