Cara Memasang Bact To Top Keren | Lampoui

Cara Memasang Tombol Back To Top Keren Dengan CSS - tombol back to top tersebut adalah alat untuk membantu / mempermudah para pengujung blogger ketika blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas / pada awal artilel tanpa perlu menggeser scrollnya ke atas dan bisa juga untuk menghiasi tampilan blogger.

Gimana sobat keren bukan, Jika Anda berminat untuk memasang tombol back tot top tersebut, simak caranya di bawah ini.

Screenshot :

Cara Memasang Tombol Back To Top :

Catatan : Gunakan Mesin Pencarian Kode untuk mempermudah dalam pencarian dengan cara klik kiri 1x pada kotak HTML kemudian tekan Ctrl + F, masukan kode yang dicari dan enter.

1. Simpan kode JQuery di bawah ini tepat di atas (</head>).

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Masukan kode CSS dibawah ini tepat diatas (]]></b:skin>) atau diatas (</style>).

.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:1px; padding-bottom:3px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s;}.smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.3s ease-in-out; transition-delay:0s;}.smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px;}.smoothscroll-top i.fa { line-height:inherit; }

3. Masukan kode jQuery dan HTML di bawah ini sebelum (</body>).

<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-chevron-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');}//]]></script>

4. Selesai sudah cara membuat Tombol Back To Top, tinggal di Simpan dan lihat hasilnya.

Jika Anda ingin menampilkan efek bounce ganti kode javascript di atas dengan kode di bawah ini.

<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-chevron-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);}//]]></script>

Mungkin itu saja yang dapat saya bagikan pada posting kali ini, sekian dari saya tentang cara, Terima kasih telah berkunjung di sini dan selamat mencoba.

Share :

Tweet

✚

Related Post