Question

我最近在学习如何使用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>

我在网上发现了这个代码，但是当我测试它时，当我点击按钮时，除了滚动部分外，所有工作都有效。

Answer 1

您不应该在js文件中编写HTML标记。你只需写：

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

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

Answer 2

你必须将javascript代码放在脚本标记内，而不是表现出来

Answer 3

你没有在头标记中包含jQuery。由于你使用的是jQuery，你应该添加它。

在头标记中添加：

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

你的身体标签放错了地方。

这是您的代码演示：Demo

Answer 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>

使用Javascript滚动列表

4 个答案: