Membuat Click Button Smooth Scroll Dengan Mudah


Kesempatan kali ini saya akan membagikan trick scroll dengan menggunakan button, sudah tidak asing ya untuk scroll button ini, tapi mungkin bagi anda yang belum pernah membuatnya akan sedikit susah untuk memahaminya,

Namun tidak kali ini, disini saya akan menjelaskan dan memberikan code yang sangat simple nan mudah, dan tidak mungkin anda tidak paham kali ini.



Move Down



Langsung saja kita siapkan stuktur htmlnya,


<div class="button-scroll"> Move Down </div>

Setelah itu kita style buttonnya mengunakan css.


.button-scroll {
    background-color: #B3D1FF;
    border: 1px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 3px #AAAAAA;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    margin: 5px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 40px;
}
.button-scroll:before {
    content: "< >";
    left: 10px;
    position: absolute;
    transform: rotate(90deg);
}

Bisa anda ubah dengan style atau bentuk yang anda ingginkan,

setelah itu masukan kode script dibawah ini. jangan lupa anda harus memiliki jquery terlebih dahulu.


jQuery(document).ready(function ($) {
    $('.button-scroll').click(function( event ) {
        event.preventDefault();
        var target = $(document).height();
        $('html, body').animate({
        scrollTop: target
        }, 2000);
    });
});

Selamat mencoba !!!