تركيب ازار التمرير لأعلي ولأسفل علي بلوجر Scroll Top and To Down
اضافة ازار الصعود للأعلي والهبوط للأسفل بطريقة سلسة ومتجاوبة وعصرية جداً وانيقة المظهر تعمل بأكواد JQuery لا تؤثر علي المدونة مفيدة في الصفحات الطويلة مثل الصفحة الرئيسية واي صفحة طويلة جداً في المدونة وتسهل علي المستخدم التنقل في المدونة.
نعرض لكم اليوم اضافة لا غني عنها في اي مدونة طويلة المحتوي وهي ازار التمرير لأعلي وأسفل المدونة اضافة غنية التعريف تأتي الأضافة بظهر جميل وعصري جداً ومتجاوب مع جميع لوحات العرض.
محلوظة: الإضافة تعتمد علي مكتبة JQuery ومكتبة Fontawesome تأكد انا قالبك يحتوي علي تلك المكتبات قبل إضافة الأداة علي مدونتك.
طريقة تركيب الإضافة
اولاً لا تنسي اخذ نسخة احتياطية من القالب قبل اي شيئ ربما يحدث خطاْ اثناء تركيب الإضافة .
والأن نقوم بوضوع كود CSS قبل وسم
]]></b:skin>
/*===========================
=== widget Go Up and Down ===
===========================*/
#scrollToTop{display:none;list-style:none;position:fixed;bottom:40%;z-index:9999;}
#scrollToTop.rtl{right:5px;}
#scrollToTop.ltr{left:5px;}
#scrollToTop.b-light a {background: #ffffff; color: #7647e2;}
#scrollToTop.b-dark a { background: #333333; color: #ffffff; }
#scrollToTop a{position:relative;overflow:hidden;cursor:pointer;font-size:15px;padding:0px;width:45px;height:45px;line-height:35px;min-width:auto;display:block;text-align:center;margin: 5px auto;}
#scrollToTop a:hover{webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-ms-box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-o-box-shadow: 0 4px 8px rgba(0,0,0,0.15);
box-shadow: 0 4px 8px rgba(0,0,0,0.15)}
#scrollToTop a.GoToComments{color:#fbbc05;}
/*--style defaul--*/
.flickering.defaul a{margin:0;}
/*--style radius--*/
.flickering.radius a{margin:5px 0;}
.flickering.radius a{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;}
/*--style shadow--*/
.shadow-mi {-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
/*--style radus--*/
.flickering.radius5 a{border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
/*--waves effect--*/
.waves-effect {position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; z-index: 1;}
/*-- btn scroll--*/
.btn-scroll{display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal;}
.btn-scroll i{line-height: 45px;}
/*--Responsive--*/
@media screen and (max-width:768px){#scrollToTop{bottom:20%;}}
/*--slideInRight--*/
@-webkit-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-moz-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-ms-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-o-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
.Animat-slideInRight{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInRight;}
/*--slideInDown--*/
@-webkit-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-moz-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-ms-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-o-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
.Animat-slideInDown{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInDown;}
/*--slideInTop--*/
@-webkit-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-moz-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-ms-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@-o-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
@keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}}
.Animat-slideInTop{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInTop;}
ثم نبحث عن هذا الوسم /body فوقة اي قبلة
<script type='text/javascript'>
/*<![CDATA[*/
$(function(){
//script Go Up and Down
var scrollToTopSpeed = 300,
scrollToTopMode = "b-light",
scrollToTopthems = "radius5", // radius or radius5 or none
scrollToToplangu = "rtl",
Tobody = $("body"),
Tomain = $("#main"),
html = "<!-- scrollToTop Widgets her START --><ul class='flickering' id='scrollToTop'><li class='Animat-slideInTop'><a class='BounceToTop btn-scroll shadow-mi radius5 waves-effect' herf='javascript:;'><i class='fa fa-chevron-up'></i></a></li><li class='Animat-slideInDown'><a class='GoToDown btn-scroll shadow-mi radius5 waves-effect' herf='javascript:;'><i class='fa fa-chevron-down'/></a></li></ul><!-- scrollToTop Widgets her END -->";
$(html).appendTo(Tobody);
var ToGo = $("#scrollToTop"),
ToUp = $(".BounceToTop"),
ToDown = $(".GoToDown");
if(ToGo.length > 0){
ToGo.addClass(scrollToTopthems);
ToGo.addClass(scrollToTopMode);
ToGo.addClass(scrollToToplangu);
$(window).scroll(function(){
if($(this).scrollTop() + $(window).height() > $(document).height() - 300) {
ToGo.fadeOut(300);
}else if ($(this).scrollTop()>10) {
ToGo.fadeIn(300);
}else {ToGo.fadeOut(300);
}
});
ToUp.click(function(){$("body,html").animate({scrollTop:0},scrollToTopSpeed) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:0},50);});
ToDown.click(function(){$("body,html").animate({scrollTop:Tobody.height()},scrollToTopSpeed);});
}//if
});//$f
/*]]>*/
</script>
التعديل علي الكود
scrollToTopSpeed هذا المتغير خاص بسرعة التمرير كلما كان الرقم اكبر كلما كان ابطئ
scrollToTopthems هذا المتغير يتحكم في نصف قطر ازرار التمرير الوضوع الإفتراضي لها حافة مستديرة بنسبة 5px فإذا اردت شكل دائري كامل استبدل radius5 با radius
scrollToToplangu هذا المتغير مهم جداً إذا كانت مدونتك باللغة الإنجلزية ولتحويل اتجاه الإضافة بقم باستبدال القيمة rtl إلي القيمة ltr
