Currently, I am diving into the world of coding with HTML, JavaScript, and CSS for a college project. Unfortunately, my instructors aren't providing any assistance, so I'm turning to you for help.
I have managed to put together some code to create a scrolling list that moves up and down with mouse clicks.
I've created three separate files for HTML, CSS, and JavaScript. However, it appears that the JavaScript file isn't properly linking. Can you lend me a hand?
HTML (named 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>
...
</ul>
</div>
</head>
</body>
CSS:
#scroll {
position: fixed;
padding: 5px 10px;
}
.box{
height: 200px;
overflow: auto;
}
JAVASCRIPT (named java.js):
<head>
<SCRIPT LANGUAGE="JavaScript"></script>
<script type="text/javascript"></script>
$(document).ready(function () {
$('#scroll').click(function () {
$('.box').animate({
scrollTop: '+=100'
}, 100);
});
});
</head>
I stumbled upon this code online, but unfortunately, when I test it, everything seems to be in order except for the scrolling functionality when clicking the button.