Question

So I have a script that will allow the contents of a div to scroll smoothly when moused over some defined anchor tags.

I’m wondering if rather than having to copy the the script over and change some of the selected elements and function names around each time I use the feature on a different part of the site, if I can just put the entire thing into a function that that I can then just pass values to?

Here’s link to JSFiddle that will give you an idea of how its basically working as of now. Thanks for any possible help!

http://jsfiddle.net/s5mgX/365/

var step = 50;
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.
    $("#feed").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function (event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function (event) {
    scrolling = false;
});


$("#scrollDown").bind("click", function (event) {
    event.preventDefault();
    $("#feed").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");
    $("#feed").animate({
        scrollTop: amount
    }, 1, function () {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}


//second scroll controller //
var step = 50;
var scrolling = false;

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


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

function twoScrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#feedTwo").animate({
        scrollTop: amount
    }, 1, function () {
        if (scrolling) {
            twoScrollContent(direction);
        }
    });
}

Answer 1

This is a job for custom plugin. See this demo http://jsfiddle.net/s5mgX/367/

You could initialize it like this:

$('#feed').scroller({
    up: '#scrollUp',
    down: '#scrollDown'
});