loading...
loading...
loading...
Pada halaman ini saya menulis artikel dengan judul script tombol back to top
Script 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 Script 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 script 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
loading...
