Di Artikel kali ini saya akan berbagi cara membuat HTML dan Css Tombol Scroll Up dan Tombol Scroll Down di Blog github pages namun ini bisa juga kita di pasang di blog lainnya’ dan biasanya di blogspot biasa di namakan back to top.

Menu scroll up ini juga sangat di perlukan oleh setiap pengunjung, sebab di saat mereka sedang membaca sebuah postingan yang kita tulis sampai pada akhir artikel, bila ingin kembali ke atas tidak perlu lagi menggunakan mouse untuk sroll up dan sroll down, mereka hanya tinggal klik Menu scroll yang telah kita buat.

Scroll Up dan Scroll Down memang banyak sekali model yang kita temui di blog!!! namun di kesempatan ini saya memberikan tampilan yang berbeda dan pastinya responsive yang letaknya di sebalah kanan dengan posisi fixed, sangat berbeda dengan yang lainnya dan dan di sini saya tdaik menggunakan jquery atau javascript.

Ikuti langkah ini untuk memasang di blog atau di github pages Anda:

HTML dan Css tombol scroll to top tanpa jquery

1. Buka blogspot atau github pages dan login.

2. Copy file Scroll Up dan Scroll Down di bawah ini dan simpan di bawah footer HTML lalu save.

HTML 
    <a class="scroll up" href="#">
        <i aria-hidden="true" class="fa fa-arrow-up"></i>
    </a>
    <a class="scroll home" href="/">
        <i aria-hidden="true" class="fa fa-home"></i>
    </a>
    <a class="scroll down" href="#finish">
        <i aria-hidden="true" class="fa fa-arrow-down"></i>
    </a>
BACA

3. Copy file CSS di bawah ini dan simpan di dalam file css Anda Dan save.

CSS 
    /* Scroll */
    html {
        scroll-behavior: smooth;
    }
    
    .scroll {
        position: fixed;
        top: 50%;
        right: 0;
        width: 30px;
        height: 30px;
        display: block;
        background: #000;
        text-align: center;
        line-height: 30px;
        z-index: 10000;
    }
    
    a.scroll {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }
    
    .scroll.up {
        top: calc(50% - 30px);
        background: #44e839;
    }
    
    .scroll.home {
        background: #1a202c;
    }
    
    .scroll.down {
        top: calc(50% - -30px);
        background: #f53d68;
    }

4. Setelah semua di lakukan dengan baik silahkan buka blog Anda dan lihat hasilnya, letaknya berada di sebelah kanan.

Doneee kini Anda telah sukses menambahkan tombol to top dan to bottom di blog, jika Anda masih kurang paham silakan tinggalkan komentarnya, Saya akan secepatnya merespon.

Nah itulah sedikit Tutorial dari Saya mengenai Cara membuat dan menambahkan Scroll Up dan Scroll Down Blog Terima Kasih sudah berkunjung dan Wassalam.