Source Code Auto Scroll Ketika Mengklik Gambar + Progress Bar

Source Code Auto Scroll Ketika Mengklik Gambar + Progress Bar

Perkenalan

Halo Semuanya, di Postingan Kali Ini Saya Akan Membagikan Source Code Source Code Auto Scroll Ketika Mengklik Gambar + Progress Bar, Seperti Biasa Kalian Bebas Mengggunakan atau Mengembangkan Script ini.

Langsung Saja Kalian Salin Script dibawah ini, Jangan Lupa Cek Demonya Terlebih dahulu.

Demo

Source Code

Progress Bar + Auto Scroll

Sebelum Memulai Pastikan Kalian Sudah Memasang ini di Template Kalian

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="scrollBox">
  <div id="progressBar"></div>
</div>
<img src="URL_GAMBAR_1" class="scroll-image" alt="Gambar 1">
<img src="URL_GAMBAR_2" class="scroll-image" alt="Gambar 2">
<img src="URL_GAMBAR_3" class="scroll-image" alt="Gambar 3">
<img src="URL_GAMBAR_4" class="scroll-image" alt="Gambar 4">
<img src="URL_GAMBAR_5" class="scroll-image" alt="Gambar 5">
<img src="URL_GAMBAR_6" class="scroll-image" alt="Gambar 6">

<style>
 #scrollBox {
  width: 100%;
  height: 10px;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000;
}

#progressBar {
  width: 0%;
  height: 100%;
  background-color: #00ced1;
}

    .scroll-image {
        cursor: pointer;
        transition: transform 0.2s;
    }
    .scroll-image:hover {
        transform: scale(1.1);
    }
</style>

<script>
$(document).ready(function() {
  $(window).scroll(function() {
    var scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;
    $('#progressBar').css('width', scrollPercent + '%');
  });
});
</script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var images = document.querySelectorAll('.scroll-image');
        images.forEach(function(image) {
            image.addEventListener('click', function() {
                var nextImage = image.nextElementSibling;
                if (nextImage && nextImage.classList.contains('scroll-image')) {
                    nextImage.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    });
</script>

Kesimpulan

Diatas adalah Source Code Auto Scroll Ketika Mengklik Gambar + Progress Bar. Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p