Прокрутка списка с помощью Javascript

Я недавно научился работать с html js и css для проекта колледжа, и поскольку они нам не помогут, я надеюсь, что вы сможете.Прокрутка списка с помощью Javascript

У меня есть эти коды, сделайте список прокрутки, который прокручивается вверх и вниз с помощью мыши.

Я создал эти 3 разных файла в html, css и js. Но файл 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>

Я нашел этот код в Интернете, но когда я его тестирую, все работает, кроме прокручивающейся части, когда я нажимаю кнопку.

источник

2013-11-16 Nanowatt

Нельзя писать HTML-теги внутри js-файла. Вам нужно только написать:

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

Кроме того, перед использованием jQuery вы должны хотя бы быть уверены в JavaScript. Я имею в виду, что даже структура вашего HTML-файла неверна (как указывали другие).

источник

2013-11-16 12:55:47 wil93

Я знаю, я такой нуб. Но, поскольку я должен сам учиться, это довольно сложно понять за короткое время. Но, спасибо, так или иначе, я постараюсь исправить ошибки :) – Nanowatt

вы должны поместить яваскрипта код внутри тега сценария, не behand это

источник

2013-11-16 12:57:10 user2986342

Вы не включили Jquery к вам в голову тег. Поскольку вы используете jQuery, вы должны добавить его.

Добавьте это в голове тег:

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

Ваше тело тега неуместна.

Это демо кода: Demo

источник

2013-11-16 12:57:41 drip

Я не вижу 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 принимала

taked из HERE

и ДА: ваш возглавить метки тела перепутались:

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

источник

2013-11-16 12:59:51

Прокрутка списка с помощью Javascript

ответ

Смежные вопросы