اذهب إلى المحتوى
  • 0

عمل تاثير في الصنف <a>

Abdalrhman Mohamad Atassi

السؤال

السلام عليكم 

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>


<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

عند الضغط على الرابط اعلاه Jump to Chapter 4  ينتقل ب الصفحة بسرعة الى العنصر الذي يملك الخاصية id ="c4" 

كيف يمكنني عمل تاثير حيث ينتقل ب حركة واضحة و سلسة ليس فورا 

شكرا لكم......

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

Recommended Posts

  • 0
بتاريخ 1 دقيقة مضت قال Mohammed Saber:

مرحباً عبد الرحمن : 
يمكنك ذلك من خلال ال  css

 


html {
  scroll-behavior: smooth;
}

 

نجح الامر لاكن هل ممكن شرح هذه الخاصية اذا سمحت 

شكرا لك .....

 

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

  • 0
بتاريخ 8 دقائق مضت قال Abdalrhman Mohamad Atassi:

نجح الامر لاكن هل ممكن شرح هذه الخاصية اذا سمحت 

عن طريق الخاصية السابقة تغير التصرف الطبيعي لل scrollbar فبدل أن يقفز مباشرة بدون أى تأثير إنتقالي .... تقوم بتغيره ليتحرك بنعومة ويأخذ وقت في التنفيذ

 

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

  • 0
بتاريخ 32 دقائق مضت قال Mohammed Saber:

عن طريق الخاصية السابقة تغير التصرف الطبيعي لل scrollbar فبدل أن يقفز مباشرة بدون أى تأثير إنتقالي .... تقوم بتغيره ليتحرك بنعومة ويأخذ وقت في التنفيذ

 

تمام شكرا لك وضحت الفكرة..

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...