حسن الشافعي2 نشر 31 مايو 2021 أرسل تقرير مشاركة نشر 31 مايو 2021 السلام عليكم في صفحة HTML عند الضغط على رابط الذهاب الى اعلى الصفحة يقوم بالقفز مباشرة الى اعلى الصفحة كيف جعل الانتقال سلس و الصعود الى اعلى الصفحة بالتدرج دون القفز مباشرة ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Wael Aljamal نشر 31 مايو 2021 أرسل تقرير مشاركة نشر 31 مايو 2021 يمكننا استخدام الخاصية في CSS: html { scroll-behavior: smooth; } تدعمها معظم المتصفحات. 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 31 مايو 2021 أرسل تقرير مشاركة نشر 31 مايو 2021 يمكنك ذلك من خلال 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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Yomna Raouf نشر 31 مايو 2021 أرسل تقرير مشاركة نشر 31 مايو 2021 يمكنك القيام بذلك بأكثر من طريقة، إحداها استخدام الخاصية 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" }); }); }); }; اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
حسن الشافعي2
السلام عليكم
في صفحة HTML عند الضغط على رابط الذهاب الى اعلى الصفحة يقوم بالقفز مباشرة الى اعلى الصفحة
كيف جعل الانتقال سلس و الصعود الى اعلى الصفحة بالتدرج دون القفز مباشرة ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.