Question

所以我有一个脚本，当moused一些定义的锚标签时，它允许div的内容平滑滚动。

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

这是JSFiddle的链接，它可以让您了解它现在的基本工作方式。感谢您提供任何可能的帮助！

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

易。您所要做的就是用函数包装它，并包含您想要的ID作为参数。

我可以帮助你与你的一个div合作：http://jsfiddle.net/eFxK4/1/

看看你是否可以让它与其他人合作。

代码如下：

function Scroller(scrollUp, scrollDown, feed){

    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);
            }
        });
    }

}

Scroller("#scrollUp", "#scrollDown", "#feed");

Answer 2

这是自定义插件的工作。请参阅此演示http://jsfiddle.net/s5mgX/367/

您可以像这样初始化它：

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

如何将此滚动脚本转换为单个函数？

2 个答案: