× İletişim Formu Blogger Scroll To Top Arlina Design 9/27/2017 Etiketler : Blogger Buton Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); @import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'); body {font-family: 'Fira Sans Condensed', sans-serif;} #return-to-top{position:fixed;bottom:20px;right:20px;background:rgb(0,0,0);background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease} #return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease} #return-to-top:hover{background:rgba(0,0,0,0.9)} #return-to-top:hover i{color:#fff;top:5px} body{background:#eee;font-family:'Open Sans',sans-serif} h3{font-size:30px;font-weight:400;text-align:center;margin-top:50px} h3 i{color:#444} </style> </head> <body> <div style="height:2000px;"> <h3>Scroll down</h3> <h3><i class="icon-arrow-down"></i></h3> </div> <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script > // ===== Scroll to Top ==== $(window).scroll(function(){if($(this).scrollTop()>=50){$('#return-to-top').fadeIn(200);}else{$('#return-to-top').fadeOut(200);}});$('#return-to-top').click(function(){$('body,html').animate({scrollTop:0},500);}); </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Scroll To Top" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Scroll To Top Arlina Design 9/27/2017 Etiketler : Blogger Buton Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); @import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'); body {font-family: 'Fira Sans Condensed', sans-serif;} #return-to-top{position:fixed;bottom:20px;right:20px;background:rgb(0,0,0);background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease} #return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease} #return-to-top:hover{background:rgba(0,0,0,0.9)} #return-to-top:hover i{color:#fff;top:5px} body{background:#eee;font-family:'Open Sans',sans-serif} h3{font-size:30px;font-weight:400;text-align:center;margin-top:50px} h3 i{color:#444} </style> </head> <body> <div style="height:2000px;"> <h3>Scroll down</h3> <h3><i class="icon-arrow-down"></i></h3> </div> <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script > // ===== Scroll to Top ==== $(window).scroll(function(){if($(this).scrollTop()>=50){$('#return-to-top').fadeIn(200);}else{$('#return-to-top').fadeOut(200);}});$('#return-to-top').click(function(){$('body,html').animate({scrollTop:0},500);}); </script> </body> </html>
Yorum Gönder