إضافة زر الصعود الى الأعلى بشكل صاروخ


أهلا بكم زوار مدونة حلم ويب اليوم وفي تدوينة جديدة إضافة زر الصعود الى الأعلى بشكل صاروخ ولن أطيل عليكم وإليكم طريقة التركيب وبكل سهولة تامة ولاكن أولا خذ نسخة إحتياطية للقالب .
  • إذهب الى القالب ثم تحرير .
  • إبحث عن ]]></b:skin> وضع قبله :
#scrolltop{display:none} #rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)} #rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0} #rocketmeluncur:hover{background-position:50% -62px} #rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1} #rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none} #rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

  • إبحث عن </body> وضع الكود التالي فوقه :

 <a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a><script type='text/javascript'>//<![CDATA[jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});//]]></script>
الى هنا ختام تدوينتنا
--------
نلقاكم في تدوينة جديدة 
-------
مرتا أخرى


 

تنويه : القوالب والإضافات الصور في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

عن الكاتب

أنا عماد إياد من المملكة الاردنية الهاشمة حبي الاول واهتمامي هو التدوين والحمد لله استطعت ان احرز نجاح كبير ومدونة حلم ويب تعبر عما اهواه

2 التعليقات لموضوع "إضافة زر الصعود الى الأعلى بشكل صاروخ "

الكاتب
avatar

رووووووووووعة ^_^ يا أخ عماد أنت مبدع

الكاتب
avatar

شكرا على مرورك وأنت مبدع أكثر |h|

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1 أن يكون التعليق خاص بمحتوى التدوينة
2 أن لا تضع أي روابط خارجية


الابتسامات الابتسامات