平滑滚动像素步长

Question

i need a liitle help here. 我在这里需要一点帮助。 I copyed this javascript including html and css form jsfiddle to use it in a matched form for my site. 我复制了包括html和css表单jsfiddle在内的此javascript，以使其以匹配的形式用于我的网站。 But if i copy the code from this side where it is working and try it out before matching it doesnt work. 但是，如果我从这方面正在工作的那一侧复制代码，并在匹配之前尝试一下就行不通了。 Following the code i copied, where is the fault?? 按照我复制的代码，哪里出了问题？

HTML: 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: CSS：

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

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

Can you please help me? 你能帮我么？

Answer 1

try replacing bind for on . 尝试更换bind为on 。

As it says in the reference page; 如参考页中所述；

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. 从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

Answer 2

Your script is loaded in the header, but the elements to which it refers #scrollUp and #scrollDown are not loaded until later in the page. 您的脚本已加载到标头中，但它引用的#scrollUp和#scrollDown元素要等到页面稍后才加载。 Since you are using jquery, try putting your javascript in a document ready function. 由于您使用的是jQuery，请尝试将您的JavaScript放入文档就绪函数中。 ie 即

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

平滑滚动像素步长

问题描述

2 个解决方案

解决方案1
0 2014-01-20 16:53:06

解决方案2
0 2015-01-08 10:50:53

平滑滚动像素步长

问题描述

2 个解决方案

解决方案1 0 2014-01-20 16:53:06

解决方案2 0 2015-01-08 10:50:53

解决方案1
0 2014-01-20 16:53:06

解决方案2
0 2015-01-08 10:50:53