• 0

الانتقال بسلاسة (انزلاق) في صفحة الويب

السلام عليكم

في صفحة HTML عند الضغط على رابط الذهاب الى اعلى الصفحة يقوم بالقفز مباشرة الى اعلى الصفحة 

كيف جعل الانتقال سلس و الصعود الى اعلى الصفحة بالتدرج دون القفز مباشرة ؟

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكننا استخدام الخاصية في CSS:

html {
  scroll-behavior: smooth;
}

تدعمها معظم المتصفحات.

smooth-scrolling-browsers-support.PNG

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك ذلك من خلال css باستخدام الأمر التالي

html {
  scroll-behavior: smooth;
}

أو اذا كنت تستخدم jquery فيمكننا ذلك باستخدام animate وميزة هذه الطريقة أننا نستطيع التحكم في سرعة المتصفح أثناء الصعود والنزول 

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } 
  });
});
</script>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك القيام بذلك بأكثر من طريقة، 

إحداها استخدام الخاصية scroll-behavior في css و لكن هذه الخاصية ليست مدعومة بالكامل من قبل جميع المتصفحات الآن، لذلك ستحتاج لاستخدام جافاسكريبت، و يمكنك القيام بذلك باستخدام التابع scrollIntoView كما يلي:

const ScrollToAnchor = () => {
  
  // نقوم بتحديد عناصر قائمة التنقل
  const navLinks = document.querySelectorAll(".menu__link");
  
  // للاستماع لحدث النقر على عنصر قائمة التنقل event listener  نقوم بإضافة 
  
  navLinks.forEach((link) => {
    
    link.addEventListener("click", (e) => {
      e.preventDefault();
      
      // نقوم بتحديد العنصر الذي تم النقر عليه
      const linkParentElement = e.target.parentElement;
      
      // نقوم بالانتقال بسلاسة إلى القسم المرتبط بالعنصر الذي تم النقر عليه
      document
        .getElementById(linkParentElement.dataset.link)
        .scrollIntoView({ block: "center", behavior: "smooth" });
    });
  });
};

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن