.auto-scroll {
position: fixed;
left: 20px;
top: 60%;
transform: translateX(-60%);
z-index: 1000;
width: 35px;
text-align:center;
}
.auto-scroll button {
font-size: 14px;
padding:0px;
margin-bottom:5px;
border: none;
background-color: #992600;
border-radius: 50px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transition: all 0.3s ease;
width: 30px;
height: 30px;
}
.auto-scroll button.active {
background-color: #2196F3;
color: #fff;
}
.auto-scroll button i {
font-size: 18px;
display: block;
}
.auto-scroll button i.fa-pause-circle {
font-size: 18px;
}
var scrollInterval;
var currentSpeed = 1;
function startScroll(speed) {
var scrollSpeed = 1;
if (speed === 2) {
scrollSpeed = 2;
} else if (speed === 3) {
scrollSpeed = 3;
}
currentSpeed = speed;
document.querySelectorAll(".auto-scroll button").forEach(function(btn) {
btn.classList.remove("active");
});
document.getElementById("speed-" + speed + "x").classList.add("active");
scrollInterval = setInterval(function() {
window.scrollBy(0, scrollSpeed);
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
stopScroll();
resetScroll();
}
}, 50);
}
function stopScroll() {
clearInterval(scrollInterval);
}
function resetScroll() {
document.getElementById("start-stop").innerHTML = '
';
document.querySelectorAll(".auto-scroll button:not(#start-stop)").forEach(function(btn) {
btn.setAttribute("disabled", true);
btn.classList.remove("active");
});
}
document.getElementById("start-stop").addEventListener("click", function() {
if (this.innerHTML === '
') {
startScroll(1);
this.innerHTML = '
';
document.querySelectorAll(".auto-scroll button:not(#start-stop)").forEach(function(btn) {
btn.removeAttribute("disabled");
});
} else {
stopScroll();
resetScroll();
}
});
document.getElementById("speed-1x").addEventListener("click", function() {
if (currentSpeed !== 1) {
stopScroll();
startScroll(1);
}
});
document.getElementById("speed-2x").addEventListener("click", function() {
if (currentSpeed !== 2) {
stopScroll();
startScroll(2);
}
});
document.getElementById("speed-3x").addEventListener("click", function() {
if (currentSpeed !== 3) {
stopScroll();
startScroll(3);
}
});