javascript - How to make a scrollable div scroll on click and mouseover using jQuery

Question

Using the markup below how would I get the "#content" div to scroll up or down when I click or hover over the "#scrollUp" or "#scrollDown" anchor tag. Scrolling should be smooth preferably. If clicked it should scroll a specific amount (for touch devices) if mouseover it can scroll until 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

You can use jQuery's animate function to accomplish a smooth-scrolling effect on click or 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);
        }
    });
}

Working example: http://jsfiddle.net/andrewwhitaker/s5mgX/

(You'll have to disable the mouseover and mouseout events to see the effects of the click event handler properly)

How it works:

• Uses the animate function mentioned above to scroll smoothly by a specified amount on click.
• Uses a flag to enable continuous scrolling on when the link's mouseover event handler is called, and disable scrolling when the link's mouseout event handler.
• When scrollContent is called, if the scrolling flag is still true after the animation is completed, animate again in the same direction. The callback function parameter of animate allows us to take an action after animation has completed.