تصميم صفحة هبوط تصميم النافبار اضافة خاصية 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

اضافة الفوتر

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

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

كوداتي - CodatyDev

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

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

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

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

إرسال تعليق