| Derbeder |
30-06-2019 13:45 |
VBCODE | Vmaracı gibi Yukarı Çık Butonu
https://i.hizliresim.com/gPyZEO.png
HTML-Kodu:
<a href="#" class="yukari-cik" style="display: inline;"><i class="fa fa-chevron-up"></i></a>
PHP- Kodu:
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.yukari-cik').fadeIn(duration);
} else {
jQuery('.yukari-cik').fadeOut(duration);
}
});
jQuery('.yukari-cik').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
Kod:
.yukari-cik {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
text-decoration: none;
color: #FFF!important;
line-height: 0!important;
background-color: #2b447d;
font-size: 16px;
padding: 13px;
text-shadow: 1px 1px 0 #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.yukari-cik :hover {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
text-decoration: none;
color: #FFF!important;
line-height: 0!important;
background-color: #2f3135;
font-size: 16px;
padding: 13px;
text-shadow: 1px 1px 0 #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
|
