Javascript 平滑滚动像素步数

我需要一点帮助。我复制了这个javascript，包括html和css表单JSFIDLE，以便在我的站点中以匹配的形式使用它。但是，如果我从代码工作的这一边复制代码，并在匹配之前尝试它，它就不工作了。按照我复制的代码，故障在哪里

HTML:

JAVASCRIPT:

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) {
    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) {
            scrollContent(direction);
        }
    });
}

您能帮助我吗？

请尝试将上的绑定替换为

如参考页所述

从jQuery1.7开始，.on方法是 将事件处理程序附加到文档

---

您的脚本加载到标题中，但它所引用的元素scrollUp和scrollDown直到页面的稍后部分才会加载。 由于您使用的是jquery，请尝试将javascript放入一个文档就绪函数中。 i、 e

---

您是否在任何地方包括JQuery？它似乎丢失，您正在调用JQuery函数。是的，也尝试包含JQuery，但仍然不起作用。添加到head并从jquery.com下载此文件而不是自己托管，尝试将此文件包含在您的head中：通过使用Google的版本，您的大多数访问者都已将其缓存，这将缩短加载时间。添加了另一行的istead，但是仍然不起作用。你在控制台中得到任何错误吗？我只是在JSFIDLE中尝试了你的代码，包括jquery库，所以我很确定这一点是不正确的。我复制了JSFIDLE的代码，正如我所说的，它在那里工作，所以这正是问题所在。我不知道问题在哪里，它应该可以工作，但它不知道你说了什么，我说的是你在页面中包含jquery时遇到了问题。检查控制台中的错误我添加了这一行，以便在scroll.js的meta标记和style标记之间的head中包含jquery。不要在控制台中获取任何错误，但如果我将鼠标上下移动，则单击它不会发生任何事情。请在控制台中键入此行，然后查看是否获得jQuery版本jQuery.fn.jQuery

#content {
    overflow:auto;
    height: 90px;
}

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) {
    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) {
            scrollContent(direction);
        }
    });
}

$(document).ready(function () {
    // Your code
});