اضافة زر الصعود السلس نحو الأعلى

اضافة زر الصعود السلس نحو الأعلى

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

  إن أهم ما في هذه الإضافة أنها تظهر بعد عدة سطور أسفل الصفحة وتختفي في كل مرة يصعد الزائر ويقارب سطح المدونة - إن صح التعبير - وكذلك عند الضغط على الزر للصعود ترتفع الصفحة بسلاسة كأنك تستمل المصعد، إنها حقا جديرة بالإضافة !
    إذا اقتنعت بإضافتها بعد هذا العرض المفصل والكلمات المغرية ( رائعة، جميلة، مهمة، جيدة...) فاتبع الخطوات الآتية.
كيفية التركيب سهلة جدا

1. لوحة التحكم >عناصر الصفحة > إضافة أداة > HTML/JavaScript
2. قم بلصق الكود التالي :   
   
   
   
   

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" >
   /***********************************************
   * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * Modified by www.m5tar.blogspot.com
   * This notice MUST stay intact for legal use
   * Visit Project Page at http://www.dynamicdrive.com for full source code
   ***********************************************/
   var scrolltotop={
       //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
       //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
       setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
       controlHTML: '<img src="رابط الصورة" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
       controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
       anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
       state: {isvisible:false, shouldvisible:false},
       scrollup:function(){
           if (!this.cssfixedsupport) //if control is positioned using JavaScript
               this.$control.css({opacity:0}) //hide control immediately after clicking it
           var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
           if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
               dest=jQuery('#'+dest).offset().top
           else
               dest=0
           this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
       },
       keepfixed:function(){
           var $window=jQuery(window)
           var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
           var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
           this.$control.css({left:controlx+'px', top:controly+'px'})
       },
       togglecontrol:function(){
           var scrolltop=jQuery(window).scrollTop()
           if (!this.cssfixedsupport)
               this.keepfixed()
           this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
           if (this.state.shouldvisible && !this.state.isvisible){
               this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
               this.state.isvisible=true
           }
           else if (this.state.shouldvisible==false && this.state.isvisible){
               this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
               this.state.isvisible=false
           }
       },
      
       init:function(){
           jQuery(document).ready(function($){
               var mainobj=scrolltotop
               var iebrws=document.all
               mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
               mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
               mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                   .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                   .attr({title:'إصعد إلى الأعلى !'})
                   .click(function(){mainobj.scrollup(); return false})
                   .appendTo('body')
               if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                   mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
               mainobj.togglecontrol()
               $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                   mainobj.scrollup()
                   return false
               })
               $(window).bind('scroll resize', function(e){
                   mainobj.togglecontrol()
               })
           })
       } }
   scrolltotop.init()
   </script>

   
   
   تخصيص الإضافة :
     أقترح عليك اختيار أيقونة من بين الأيقوانات التالية :
   
   
   
    وبالطبع فاللون الأصلي هو البرتقالي لكن الألوان الأخرى فهي ناتجة عن تعديل الأيقونة الأصلية. فـبـإمكانك الآن اختيار إحدى الأزرار أعلاه أو البحث عن أزرار أخرى وتعديل رابط الصورة  بالأيقونة التي أعحبتك !

Tweet

تنبيه : أرجو عدم نسخ المحتوى بدون ذكر المصدر و السلام

بقلم المطورون العرب

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

تعليقك يساعدنا على المواصلة و يدعمنا نفسيا فلا تبخل علينا برأيك

قسم : اظافات بلوجر