Menu
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.
$(document).ready(function() {
$('#scroll').click(function() {
$('html, body').animate({
scrollTop: '+=400'
}, 1000);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!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>
593
The 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.net/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
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
