使用 Javascript 滚动列表答案

【问题标题】：Scrolling list with Javascript使用 Javascript 滚动列表
【发布时间】：2013-11-16 12:51:51
【问题描述】：

我最近正在学习如何在一个大学项目中使用 html js 和 css，由于它们不会帮助我们，我希望你能。

我有这些代码，对某种类型的滚动列表执行操作，通过鼠标单击上下滚动。

我在 html、css 和 js 中创建了这 3 个不同的文件。但是javascript文件似乎没有链接。你能帮帮我吗？

HTML（命名为 ola.css）：

 <body>
 <head>

<link type="text/css" rel="stylesheet" href="ola.css" />
<script type= "text/javascript" src="java.js"></script>
<div class="box">
        <input type="button" value="Scroll" id="scroll" />
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>

        </ul>
    </div>

</head>
</body>

CSS：

#scroll {
    position: fixed;
    padding: 5px 10px;
}
.box{
height: 200px;
    overflow: auto;
}

JAVASCRIPT（命名为 java.js）：

<head> 

<SCRIPT LANGUAGE="JavaScript"></script>


<script type="text/javascript"></script>

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});



</head>

我在网上找到了这段代码，但是当我测试它时，除了单击按钮时的滚动部分之外，所有的都可以工作。

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

你不应该在 js 文件中写 HTML 标签。你只需要写：

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});

另外，在使用 jQuery 之前，您至少应该首先对 JavaScript 有信心。我的意思是，即使您的 HTML 文件的结构也不正确（正如其他人指出的那样）。

【讨论】：

我知道，我在这方面是个菜鸟。但是由于我要自学，所以要在短时间内全部理解起来有点复杂。不过还是非常感谢你，我会努力改正错误的:)

【解决方案2】：

你必须将javascript代码放在脚本标签中，而不是放在它下面

【讨论】：

【解决方案3】：

您没有在 head 标签中包含 jQuery。由于您使用的是 jQuery，因此您应该添加它。

在你的 head 标签中添加这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

你的body标签放错了。

这是您的代码演示：Demo

【讨论】：

【解决方案4】：

我没有看到 jquery javascript 文件。包括其中之一

http://code.jquery.com/jquery-latest.min.js - 最新版本，jQuery 托管 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js - 版本 1.x 系列，Google 托管 http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js - 版本 1.9.1 系列，Google 托管 http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js - 版本 1.9.1，Microsoft 托管

取自 HERE

是的：你的头和身体标签搞砸了：

<head> 
    your css link and javascript
</head>
<body> 
   your condtruction
</body>

【讨论】：