خاصية الرجوع لاعلى وأسفل الصفحة

السلام عليكم ورحمة الله وبركاته

زوار المدونة الكرام اقدم لكم اداة مميزة وكثير من المدونين يبحثون عن مثلها لكن هذه الأخيرة مميزة عن غيرها

وهي أداة الرجوع لاعلى الصفحة والجديد في هذه الأداة هو خاصية الرجوع لأسفل الصفحة أيضا

نعم يمكنك النزول والصعود بهذه الاداة الصغيرة والمميزة

صورة للأداة

كل ما عليك فعله هو البحث عن

  ]]></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/AVvXsEguCtuAz0e8uIt_Myd1ynlFyW1qgA8XZjp2HMo-uaovRNZQOnZlnObNdPRv_AKVBdQY4VnHNppZ7FSdECued3Wqeu0qyPElPuXohVrZrWqNz0mTK8hqro0FFevNYm5OhZnW765717UZzP0/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/AVvXsEgRGv8n3XywS160Kder_G8kGNl-X_nyn1y3gBmyhhEULqelplf4o9_YzDJ26B8Wha6nE5YPsknBprzkMXxPgp8vFgICWcF38n4GcjKieiMQ3W5QlNwt7OmWCBsV8AaHz6vO6LDt63t9a30/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>

  

وهنيئا لك