Promo artikel menutup otomatis setelah 5 detik
loading...

Kode HTML tombol back to top

Pada halaman ini saya menulis artikel dengan judul kode HTML tombol back to top

Kode HTML back to top untuk blogger berfungsi untuk meningkatkan kenyamanan pengunjung ketika membaca artikel panjang yang ada dalam situs atau blog anda yang sudah di gulir atau di scroll sampai ke bawah dan ingin mengulangi membaca dari awal artikel



Artikel ini merupakan artikel alternatif dari artikel saya sebelumnya yang berjudul kode HTML tombol kembali ke atas untuk blogger,tujuannya sama yaitu menampilkan tombol back to top namun dengan cara atau metode yang berbeda

Apabila anda berminat untuk menerapkannya di blog atau situs anda,saya persilahkan untuk meng copy kode HTML back to top di bawah ini

<kode HTML A>

/* Back to top button sampingkanan.com */ .scroll-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999; background-color: #000; color: #DDEA50; width: 50px; height: 48px; line-height: 48px; right: 10px; bottom: 10px; padding-top: 2px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .scroll-top-wrapper:hover { background-color: #000; } .scroll-top-wrapper.show { visibility:visible; cursor:pointer; opacity: 1.0; } .scroll-top-wrapper i.fa { line-height: inherit; }

<Kode HTML B>

<!-- Back to top button sampingkanan.com --> <div class="scroll-top-wrapper"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); $('.scroll-top-wrapper').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 500, 'linear'); } </script>

Lantas bagaimana memasangnya di blog atau situs anda ?,temukan jawabannya dengan membaca artikel saya yang berjudul cara membuat tombol back to top

Demikian semoga membawa manfaat
Artikel unik dari sampingkanan.com
loading...

Berlangganan artikel sampingkanan.com via email:

Iklan Atas Artikel

loading...

Iklan Bawah Artikel

loading...