Ma`lumotlar : 1092
Xabarlar soni: 314
Bugun: 27.4.2024
Soat: 1:35
Sayt uchun yuqoriga xarakatlanuvchi tugma
Muallif: Mengliyev Sh.
Qo`shilgan sana: 2015-01-19
Oddiy"Yuqoriga" xarakatlanuvchi oddiy tugma
Bu kodni istalgan quyi satrga qo`shishingiz mumkin:
<a href="#" title="Boshiga qaytish" class="topbutton">^Yuqoriga</a>
css kod:
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
jQuery yordamida yuqori tugma
JQuery JavaScript kod:
Yuqoriga xarakat qiluvchi tugma uchun javascript kodini ko`rib chiqamiz.
</head> tugagandan so`ng quyidagi kodni yozing
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
jquery.min.js faylni Internetdan yuklab oling
css kod quyida berilgan
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступ кнопки от нижнего края страницы*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}
HTML kod:
HTML tegining </body> yopilish tegidan oldin yozing.
<DIV ID = "toTop" > ^ Yuqoriga </ DIV >
JQUERY da yuqoriga va pastga harakatlanuvchi tugma
HTML kod:
HTML tegining </body> yopilish tegidan oldin yozing.
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="scroll-startstop.events.jquery.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
scroll-startstop.events.jquery.js va jquery-1.3.2.js ni internetdan yuklab oling
style.css kod quyida keltirilgan
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(../images/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(../images/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
2523 marta o`qildi.