javascript - 如何将我拥有的这个滚动脚本变成一个函数？

Question

所以我有一个脚本，当鼠标悬停在某些已定义的 anchor 标记上时，该脚本将允许 div 的内容平滑滚动。

我想知道我是否可以在网站的不同部分使用该功能时不必复制脚本并更改一些选定的元素和函数名称，如果我可以把整个东西进入一个函数，然后我可以将值传递给？

这是 JSFiddle 的链接，可以让您了解它目前的基本工作原理。感谢您提供任何可能的帮助!

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

这是自定义插件的工作。看这个演示 http://jsfiddle.net/s5mgX/367/

你可以像这样初始化它:

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