I would like to be able to scroll down on a list by clicking a button.
I'm using this JSFiddle here
but that scrolls down the entire page. I would like to have it scroll a list instead, I started on it here, but it doesn't work. Thanks!
<!DOCTYPE html>
<body>
<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>
</ul>
</div>
</body>
$(document).ready(function() {
$('#scroll').click(function() {
$('html, body').animate({
scrollTop: '+=400'
}, 1000);
});
});
I would like to be able to scroll down on a list by clicking a button.
I'm using this JSFiddle here
but that scrolls down the entire page. I would like to have it scroll a list instead, I started on it here, but it doesn't work. Thanks!
<!DOCTYPE html>
<body>
<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>
</ul>
</div>
</body>
$(document).ready(function() {
$('#scroll').click(function() {
$('html, body').animate({
scrollTop: '+=400'
}, 1000);
});
});
1 Answer
Reset to default 4The list won't scroll because the list is already at 100%. For it to scroll, you have to put it in a separate container (the div) set a height for it and then scroll the div, not the list or the html.
Here is the fiddle
http://jsfiddle/TN4wP/38/
I added some css for the div
#scroll {
position: fixed;
padding: 5px 10px;
}
.box{
height: 200px;
overflow: auto;
}
and I changed the animation to work on only the div
$(document).ready(function () {
$('#scroll').click(function () {
$('.box').animate({
scrollTop: '+=100'
}, 100);
});
});
this should get you started