Tombol Back To Top Versi Umpan Ikan

Tombol Back to Top Versi Umpan Ikan - Tombol Back to Top ialah suatu tombol untuk kembali ke atas dari halaman website tanpa harus memakai scrollbar. Back to top ini fungsinya untuk memudahkan pengunjung untuk kembali ke atas dengan cepat. Kita sering menjumpai tampilan back to top yang biasa, namun kali ini akan berbeda dari biasanya.

Tombol Back to Top yang satu ini seakan-akan kita sedang memancing, jadi ketika scrollbar digulung kebawah otomatis kail dengan umpan ikan turun kebawah, ketika scrollbar digulung ke atas kail naik lagi ke atas. Lalu ketika kail dengan umpan di klik, scrollbar menggulung kembali ke atas.

Memasang Tombol Back to Top Versi Umpan Ikan

1. Buka Blog > Template > Simpan isyarat ini diatas isyarat ]]></b:skin> atau </style>

/* Back to Umpan Ikan */ .umpanikan{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative} #umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21} #umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99} #umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible} #umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}

2. Kemudian simpan isyarat ini diatas isyarat </body>

<script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})}); //]]> </script>

3. Simpan isyarat ini dibawah isyarat <body>

<div id="umpanikanTOP"></div> <div class="umpanikan" id="umpanikan"> <div id="umpanikan-bubble">Kembali ke atas</div> </div>

Silakan Anda ganti goresan pena yang Saya tandai sesuai dengan keinginan.

4. Simpan template.

Result

Bagaimana berdasarkan kalian? Unik bukan, mudah-mudahan Tombol Back to Top Versi Umpan Ikan ini sanggup menunjukkan nuansa gres bagi kalian. Semoga bermanfaat.