Membuat Scroll To Top Button

Membuat Scroll To Top Button

Bola Hero Gawai

Membuat Scroll To Top Button

Siang ini saya share cara Membuat Scroll To Top Button yang letaknya di bagian bawah blog. Kegunaan tombol ini sesuai dengan namanya scroll to top yaitu menscroll halaman blog kembali ke bagian atas blog. Dengan mengklik Scroll To Top Button secara otomatis halaman kembali ke bagian atas sehingga pengunjung tidak usah menscroll dengan mousenya. Membuat Scroll To Top Button bisa disimpan di sebelah kiri bawah atau kanan bawah. 

Membuat Scroll To Top Button  cukup mudah, Anda login ke dashboard blog >> Template >> Edit HTML >> Cari kode </body> ( gunakan CTRL + F untuk memudahkan pencarian ), copy kode di bawah ini dan paste DI ATAS / SEBELUM kode </body> tadi.


<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr("href");
            if ($(window).scrollTop() != "0") {
                $(this).fadeIn("slow")
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == "0") {
                    $(scrollDiv).fadeOut("slow")
                } else {
                    $(scrollDiv).fadeIn("slow")
                }
            });
            $(this).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, "slow")
            })
        }
    });
    $(function() {
        $("#w2b-StoTop").scrollToTop();
    });
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top</a>

Catatan:
right menandakan tombol ini disimpan di sebelah kanan, untuk disimpan disebelah kiri ganti dengan left.
Scrool to Top adalah tulisan yang tampak pada tombol, bisa Anda ganti dengan Back To Top atau lainnya.

Demikian sharing Membuat Scroll To Top Button pada kali ini, mudah-mudahan bermanfaat.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

11 Comments Add Comment

beda nya apa mas sama Back to Up .... ?

Balas

Fungsinya sama saja untuk mengembalikan halaman ke atas, namun yang membedakannya ada yang menggunakan efek scroll sehingga ketika di klik akan menggulung ke atas secara halus, namun ada juga yang tidak menggunakan efek.

Balas

Mas kalo kotak scroll to top nya seperti...
Cyber4rt.com . bagaimana ya...?

Balas

Ganti background dengan image tambah efek hover, namuna agak ribet sih..

Gini aja ctrl+u di halaman cyber4art, copy code javascript paling bawah yang diatas /body untuk scrolltop dengan id "panaiki", simpan juga di edit HTML di atas /body. cari kode CSSnya dengan kode "panaiki" juga...

Namun ada baiknya minta izin dulu pada yang punya...hehehe :D

Balas

Makasih y mas.... sapa namanya ?

Balas

udah pasang mas, tapi di cek di w3c malah tambah satu eror saya kenapa yah?
ini yang erornya mas...

tanda ">" jadi warna merah,,??

Balas

Kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script> ini dihapus aja karena di template mas Sahid sudah ada jquery library yang di atas kode head itu.

Kemudian kode CSSnya pindahin ke atas kode skin satuin sama kode css lainnya.

Balas

ohya cara membuat title di link ini caranya gimana kok kucoba gk bisa

Balas

Tambahkan title pada link ini

<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top</a>

Sehingga menjadi seperti ini

<a href='#' id='w2b-StoTop' style='display:none;' title='Scroll to Top'>Scroll to Top</a>

Balas

Punyaku juga tandanya jadi merah

Balas

gmn cara rubah warna kotaknya biar gak abu - abu, trus dibikin ada opacitynya ..
makasih sebelumnya

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×