شاهد المثال برمجه مميزه فوق وتحت
ابحث
]]></b:skin>
وضع الكود فوقه
/* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRPh1xiUVCCk2c2aK4iZo3znZ69QazhDjpUU3vpFQOYuFSGtqcjMG1ePmpl5sY3ws-hY_cYkiWZdIGZXEPzpGk_9naWS42GGXAGmFJ9lpiL2KYQACUq0SLM2bzs-H9wedJ6qqESdBlBUA/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWX2WCEpwEbUMjjtKp27wYeRGFJzrcAHQ_JdncrKd_0AJ-Uuds4D_sn2RjdJhhOyQARh71s4ZNL3BUz-CzCucS68oGt1CwoZNkvaxa9sEXvJC7uD5QzIOrgIGHxPiXwktTaaY8jV3Mng/s16/arrow_down.png) no-repeat top left;background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px;opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
وابحث عن
</body>
وضع الكود فوقه
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
< div class='button_up' id='button_up' style='display:none;'/>< div class='button_down' id='button_down' style='display:none;'/>
< script> //<![CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() { var $elem = $('body'); $('#button_up').fadeIn('slow');$('#button_down').fadeIn('slow');$(window).bind('scrollstart', function(){$('#button_up,#button_down').stop().animate({'opacity':'0.2'}); });$(window).bind('scrollstop', function(){$('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click(function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } );$('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );});//]]>< /script>
وسلامكتك
0 تعليقات