Question

我需要一个liitle帮助。我复制了这个javascript，包括html和css表单jsfiddle，以匹配的形式使用它为我的网站。但是，如果我从它正在工作的这一侧复制代码并在匹配之前尝试它不起作用。在我复制的代码之后，故障在哪里？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html><head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="scroll.js" type="text/javascript"></script>
    <link rel="stylesheet" media="all" href="css.css">
</head> 
<body>
<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>
            <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>
            <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>
</body>
</html>

CSS：

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

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

你能帮帮我吗？

Answer 1

尝试将bind替换为on。

如参考页中所述;

从jQuery 1.7开始，.on（）方法是首选方法将事件处理程序附加到文档。

Answer 2

您的脚本已加载到标头中，但它引用的元素#scrollUp和#scrollDown直到页面后面才会加载。由于您使用的是jquery，请尝试将javascript放在文档就绪函数中。即。

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

平滑滚动像素步骤

2 个答案: