Implement automatic scrolling using jQuery
HTML
<br/>
<strong>Time (in Seconds) :</strong> <input type="text" id="txtTime" value="3" />
<strong>Pixel :</strong> <input type="text" id="txtPixel" Value="100"/>
<input type="button" class="button" id="btnStart" value="Start Scrolling" />
<input type="button" class="button" id="btnStartHidden" style="display:none;" value="Start Scrolling" />
<input type="button" class="button" id="btnStop" value="Stop Scrolling" />
<br/><br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id turpis et
elit eleifend consectetur ut eu velit. Suspendisse laoreet malesuada nulla tristique
vestibulum. Praesent ornare hendrerit dolor aliquam gravida. Maecenas mollis aliquet
sapien eget egestas. Mauris erat neque, iaculis a molestie non, feugiat quis tortor.
Sed malesuada interdum fringilla. Mauris adipiscing felis felis, eget imperdiet
quam. Donec id elit quis diam viverra rutrum. Phasellus mattis felis mauris, at
interdum tellus. Ut purus urna, molestie quis mattis vel, scelerisque eget nunc.
Cras vitae nisi leo. Curabitur viverra aliquam congue. Nunc auctor nunc vel nunc
molestie sed vestibulum velit venenatis. Maecenas non leo vel nunc auctor commodo.
Cras feugiat convallis consectetur. Pellentesque semper sagittis nunc ac posuere.
Nulla et volutpat lorem. Sed ullamcorper ante id dui tincidunt euismod. Mauris nec
mi in velit malesuada viverra et ut nibh. Phasellus venenatis ligula malesuada sapien
tincidunt volutpat. Etiam dictum pharetra est at auctor. Praesent rhoncus ligula
vel erat vehicula in consequat lorem faucibus. Sed scelerisque imperdiet ultricies.
Cras dui nulla, bibendum eget dapibus et, pharetra nec nulla. Nullam eros turpis,
ultricies vitae euismod ac, fermentum vitae quam. Ut quis ipsum leo, non tincidunt
arcu. Nunc sit amet mi sed metus euismod volutpat. Lorem ipsum dolor sit amet, consectetur
...
CSS
body {
font-family: calibri;
}
input[type="text"] {
width:50px;
}
#btnStop {
position: absolute;
right:0px;
top: 0px;
background-color: red;
font-family: calibri;
}
#btnStartHidden {
position: absolute;
left:0px;
top: 0px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: calibri;
}
JavaScript
$(document).ready(function () {
var scrollInterval = false;
var iSeconds = $('#txtTime').val();
iSeconds = parseInt(iSeconds) * 1000;
function AutomaticScroll() {
var nScrollTop = $(window).scrollTop();
if (parseInt(nScrollTop + $(window).height()) == $(document).height()) {
clearInterval(scrollInterval);
return;
}
var nPixel = $('#txtPixel').val();
nScrollTop = nScrollTop + parseInt(nPixel);
$('html, body').animate({ scrollTop: nScrollTop }, 1000);
$('#btnStop').animate({"top": nScrollTop + "px"}, 1500);
}
$(window).scroll(function(){
var nScrollTop = $(window).scrollTop();
if(parseInt(nScrollTop) == 0)
{
$('#btnStartHidden').hide();
$('#btnStop').animate({"top": nScrollTop + "px"}, 1500);
}
});
$('#btnStart').click(function() {
scrollInterval = setInterval(AutomaticScroll, iSeconds);
});
$('#btnStartHidden').click(function() {
scrollInterval = setInterval(AutomaticScroll, iSeconds);
$(this).hide(1000);
});
$('#btnStop').click(function() {
clearInterval(scrollInterval);
var nScrollTop = $(window).scrollTop();
if(nScrollTop != 0)
{
$('#btnStartHidden').show(500);
$('#btnStartHidden').animate({"top": nScrollTop + "px"}, 500);
}
});
});