إضافة زر الصعود للأعلى

إضافة زر الصعود للأعلى

يوجد الآن مشاهدة التعليقات : 14

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

دائما ما نبحث عن إضافات جديدة لموقعنا حتى إن تواجدت فلا بد أنك تفكر بتغييرها لتحديث أجمل وأفضل، وهذا ما سنتطرق إليه في هذه التدوينة، في إضافة زر صعود للأعلى وهو زر لا غنى عنه يُسهل على المتصفح العودة لأعلى الصفحة بسهولة وسرعة تامة بشكل جميل
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3. ابحث عن ]]></b:skin ثم ضع الكود التالي فوقه
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}
4. ابحث عن <body/> ثم ضع الكود التالي فوقه
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){ 
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
}); 
$('.smoothscroll-top').on('click', scrollToTop);
}); 
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 14 تعليقًا:

  1. أزال المؤلف هذا التعليق.

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

      حذف
    2. أزال المؤلف هذا التعليق.

      حذف
  2. غير معرف9/29/2014

    أخي أريد طريقة إضافة السمايلات إلى مدونتي أي فوق تعليق

    ردحذف
  3. الحبيب2/06/2015

    أخي أستسمحك لقد نسيت أن تضيف كود الجي كوري



    بالطبع قبل



    لانه مهم لكي تعمل الاضافة وشكرا لك

    بالتوفيق

    ردحذف
  4. شكراً لك، لكن الأغلبية وكل القوالب يكون بها ذاك الكود على العموم تشكر

    ردحذف
  5. Zied Zaabi3/18/2015

    www.zied1web.blogspot.com

    ردحذف
  6. شكرا لك أخي


    إضافة زر الصعود إلى أعلى بأشكال جميلة ومختلفة لمدونات بلوجر
    http://mido4tech.blogspot.com/2015/04/Button-BackTo-Top.html

    ردحذف
  7. ahmad fathi4/27/2015

    ]]></b:skin
    غير موجود بالمدونه

    ردحذف
  8. إبحث عن skin فقط وستجدها

    ردحذف
  9. كيف احذف الموجود من اصل القالب وتركيب جديد

    ردحذف
  10. بارك الله فيك ^^

    ردحذف
  11. مشكور اخي fenlweb.com

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم