تصميم صفحة هبوط تصميم النافبار اضافة خاصية scrolling باستخدام jQuery

اضافة خاصية scrolling عمل ارتباط بين الروابط واقسام الصفحة

نتوجه الى نهاية القالب قبل اغلاق </body> نضيف اكواد الجيكوري المسؤلة عن خاصية scrolling وعمل الروابط

الشرح بالفيديو

اكواد الجيكوري

jQuery

// Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 56)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
  });

// Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 56
  });

})(jQuery); // End of use strict
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".fixed-top").addClass("top-nav-collapse");
    } else {
        $(".fixed-top").removeClass("top-nav-collapse");
    }
});
//]]></script>

سنقوم بالتعديل على بعض اكواد html داخل القالب

تعديل على body

تعديل navbar

تعديل الروابط

اضافة كلاس js-scroll-trigger للروابط داخل النافبار

اضافة id كل قسم داخل link

اضافة خصائص css

اضافة الفوتر

تحميل قالب بلوجر صفحة هبوط مجاني من الرابط التالي

اضغط هنا للتنزيل

تصميم قالب بلوجر

تصميم صفحة هبوط تصميم النافبار اضافة خاصية scrolling باستخدام jQuery

اضافة خاصية scrolling عمل ارتباط بين الروابط واقسام الصفحة

تحميل قالب بلوجر صفحة هبوط مجاني من الرابط التالي

ليست هناك تعليقات:

إرسال تعليق

1 تصميم قالب بلوجر Blogger من البداية تخطيط قالب بلوجر

2 تصميم قالب بلوجراضافة قائمة علوية نافبار بشكل احترافي

3 تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

4 تكويد وتصميم قالب بلوجر تقسيم منطقة المحتوى

5 اضافة أداة المشاركات رسائل المدونة الإلكترونية

6 تصميم قالب بلوجر اضافة اقراء المزيد

7 تصميم قالب بلوجر تصميم منطقة السايدبار

8 تصميم قالب بلوجر تصميم وتكويد منطقة الفوتر

9 الانتهاء من تصميم قالب بلوجر واجراء تحسينات لمظهر القالب

10 تحميل قالب بلوجر مجانا

نموذج الاتصال