Cara Membuat Back To Top Simple

Back To Top atau kembali ke atas bila di klik / tekan jika di smartphone pasti merupakan unsur penting untuk situs yang digunakan karena jika tidak ada yang namanya kembali ke atas masa harus scroll lama kan, pasti bikin pengunjung lama kalau ingin baca lagi apalagi jika situs yang baca teksnya seperti LN gitu.

Membuatnya kita hanya memainkan unsur css saja agar lebih mudah dan untuk tampilan saya buat sederhana karena ini hanya pembuatan dasar menurut saya tanpa bantuan javascript tapi jika kalian paham dalam kodenya pasti bisa dibuat menjadi lebih menarik lagi.

Membuat Back To Top

Pertama buat kode seperti berikut

<div id="backtop">
    <a href="#">Pancing</a>
</div>

Kedua tambahkan css agar tampilan menjadi keren

    #backtop{
        position: fixed;
        bottom: 50px;
        right: 0;
        transform: rotate(90deg);
    }
    #backtop a{
        background: lightblue;
        color: white;
        padding: 15px;
        text-decoration: none;
        cursor: pointer
    }

Tapi kok pas di teken cepet banget keatasnya ? ngak smooth gitu ? nah disini kalian tambahkan css khususnya seperti ini

    html{
        scroll-behavior: smooth
    }

Setelah itu simpan dan coba kembali deh

Fungi dari scroll-behavior ini supaya scroll menjadi smooth tidak kasar jadi terlihat lebih mulus saat di klik pada back top.

See the Pen
Simple Back To Top by Rian_kuno (@rian_kuno)
on CodePen.