Home » » Cara membuat back to top

Cara membuat back to top


Posted by Template Responsive Blogger Minimalis on Friday, 6 May 2016

back to top di kanan
kopi kode di bawah ini dan masukan ke widget html/javascript

<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='KEMBALI KE ATAS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNhmOZHor1dC6fxPrBQcneXXY5Ir3RPaJjaAA3DiHwGVVYMPIyU0sRllBajrgt-EDrLPGCvJKHuagursXuqwledUvV2hZakA2Ct1wHXoE0P4IsZS4epGvNVbjl4ehVIKHMuUDeQfOFQfS/s1600/navigate-up-icon.png'/></a>

back to top di kiri / sama lewat widget


 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; left:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#000;background:-moz-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(50%,#fff),color-stop(51%,#000),color-stop(100%,#000));background:-webkit-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-o-linear-gradient(top,#000 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>



0 comments:

Post a Comment

Kontak