The Back to Top button on this one is as if we were fishing, so when the scrollbar is rolled down, the hook will automatically drop down, when the scrollbar is rolled up, the hook goes up again. Then when the hook with bait is clicked, the scrollbar rolls back up.
Installing Back to Top Fish Bait Version Button
1. Go to Blog> Templates> Save the code directly above the </head> code
<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}
</style>2. Then save this code above the </body> code
<script>
//<![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. Save this code under the code <body>
<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">Back on top</div>
</div>Please change the writing that I marked as you wish.
4. Save the template.
What do you think? It's unique isn't it, hopefully this Fish Bait Version Back to Top Button can provide a new nuance for you. May be useful.
Post a Comment