البرنامج النصي إلى أعلى الصفحة مسج. التمرير العمودي للصفحة باستخدام jQuery والتوافق عبر المتصفحات

في هذا البرنامج التعليمي، سوف نتعلم كيفية إنشاء زر التمرير إلى الأعلى الخاص بنا للصفحات الطويلة. طريقة التنفيذ بسيطة جدا. بمجرد الانتهاء من ذلك، يمكنك تخصيص زر التمرير إلى الأعلى بالطريقة التي تريدها. الميزة هي أن هذا الزر يتم تنفيذه في إطار عمل jQuery الشهير، والذي يتم استخدامه في كل موقع ويب تقريبًا.

تحضير

أولا، نحن بحاجة إلى صورة للزر العلوي. للقيام بذلك، يمكنك تنزيل أي سهم أو رسمه بنفسك. احفظه كسهم بي إن جي . كما كنت قد خمنت، هذه الصورة ستكون زرنا إلى الأعلى.

أنماط CSS لزر "الرجوع إلى الأعلى".

في رأس الصفحة أو في ملف CSS منفصل، قم بتعيين أنماط CSS لكتلة div باستخدام المعرف=Scroller.

#Scroller( الموضع: ثابت؛ / ** انتقل موضع الزر إلى الأعلى ** / الأسفل: 30 بكسل؛ / ** صورة الزر إلى الأعلى ** / الخلفية: عنوان url شفاف (arrow.png) أعلى اليسار بدون تكرار؛ العرض: 32 بكسل الارتفاع: 32 بكسل؛ المؤشر: المؤشر /** إخفاء الزر في البداية **/ العرض: لا شيء)

كما ترون، قمنا أولاً بتعيين موضع الكتلة على موضع ثابت، ويمكنك تغيير موضع الزر العلوي باستخدام القيمة السفلية. بعد ذلك، قمنا بتعيين الخلفية لسهمنا الذي أعددناه في المرحلة الأولى. وأخيرًا، نقوم بإخفاء الزر بحيث لا يكون مرئيًا عند تحميل الصفحة للتو.

كود جافا سكريبت لزر "العودة إلى الأعلى".

كما هو متوقع، سنكتب رمز البرنامج النصي للزر في قسم الرأس.

أولا، دعونا نربط مكتبة jQuery، ولهذا سوف نستخدم Google CDN. على الرغم من أنه يمكنك الاتصال من موقع jQuery الرسمي أو Microsoft أو من الخادم الخاص بك. أستخدم Google CDN، في رأيي أنه يعمل بشكل أسرع.

نقوم بإنشاء وظيفة JavaScript بعد تحميل مكتبة jQuery.

$(document).ready(function())( $(window).scroll(function () ( if ($(this).scrollTop() > 0) ( $("#scroller").fadeIn(); ) else ( $("#scroller").fadeOut(); ) ); $("#scroller").click(function () ( $("body,html").animate((scrollTop: 0 ), 400) ؛ عودة كاذبة؛ ))؛

دعونا نلقي نظرة على الكود بعد قليل... أولاً، نستدعي الدالة لتحميل الصفحة:

$(مستند).ready(function())( ));

في الجزء الأول من الدالة، قمنا بتعيين الحدث على حدث التمرير. عندما يتم تمرير النافذة، تكون قيمة المتغيرscrollTop أكبر من 0، وفي هذا الوقت نعرض الزر "Top"؛ عندما لا يحدث التمرير، نقوم بإخفائه.

في الجزء الثاني من الوظيفة، نعلق معالج حدث النقر على زر التمرير إلى الأعلى؛ وعند النقر عليه، نقوم بتحريك التمرير إلى علامة الجسم. وهذا يعني أن التمرير إلى أعلى الصفحة يحدث.

وبهذا يكتمل إنشاء الكود الأساسي لزر "العودة إلى الأعلى"!

قم بالتمرير إلى أعلى التحسينات

أتمنى أن يكون لديك آلاف الأفكار حول كيفية جعل هذا الزر أجمل وأفضل. كل ما عليك فعله هو إجراء التعديلات الخاصة بك على هذا البرنامج النصي. على سبيل المثال، يمكنك إضافة تغيير نمط الزر عند تمرير الماوس.

ختاماً

أوجه انتباهكم إلى برنامج نصي يقوم بتمرير الصفحة بسلاسة إلى الأعلى عند النقر فوق الرابط المقابل. لقد قمت بعمل خيارين: جافا سكريبت خالص ومسج. اختر اللي اعجبتك اكثر.

خيار جافا سكريبت

رمز البرنامج النصي:

فار ر؛ وظيفة up() ( var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(top > 0) ( window.scrollBy(0,-100); t = setTimeout("up() ",20); ) else ClearTimeout(t); إرجاع false; )

الرقم -100 هو عدد البكسلات التي يتم تمريرها لأعلى كل 0.02 ثانية (الرقم 20).

أعلى

خيار مسج

رمز البرنامج النصي:

(function($) ( $(function() ( $("#up").click(function() ( $("html, body").animate((scrollTop: 0),500); return false; ) ) ) )))(مسج)

الرقم 500 هو الوقت الذي تحدث فيه الحركة (التمرير)، وهي في هذه الحالة نصف ثانية.

يجب عليك إضافة الرابط التالي إلى المكان المناسب في كود html الخاص بالصفحة:

أعلى

إذا تم تعطيل JavaScript في المتصفح، فعند النقر فوق هذا الرابط، سيتم تمرير الصفحة أيضًا إلى الأعلى، ولكن ليس بسلاسة.

Reg.ru: المجالات والاستضافة

أكبر مزود مسجل واستضافة في روسيا.

أكثر من 2 مليون اسم نطاق في الخدمة.

الترويج، بريد المجال، حلول الأعمال.

لقد قام أكثر من 700 ألف عميل حول العالم باختيارهم بالفعل.

إطار عمل Bootstrap: تخطيط سريع التكيف

دورة فيديو خطوة بخطوة حول أساسيات التخطيط التكيفي في إطار عمل Bootstrap.

تعلم كيفية التنضيد ببساطة وسرعة وكفاءة باستخدام أداة قوية وعملية.

تخطيط لأجل والحصول على أموال.

* مرر الماوس فوق لإيقاف التمرير مؤقتًا.

العودة إلى الأمام

قم بالتمرير السلس للصفحة لأعلى باستخدام jQuery

في هذا الفيديو، سننظر إلى لحظة إنشاء صفحة سلسة، قم بالتمرير لأعلى عند النقر فوق الرابط.

غالبًا ما يكون من المناسب استخدام رابط "العودة إلى الأعلى" عندما تكون أقرب إلى أسفل الصفحة.

يمكنك تنفيذ هذه الميزة باستخدام HTML وCSS فقط، ولكن في هذا الفيديو سأوضح لك كيف يمكنك تحسين هذه الميزة وجعلها أكثر ملاءمة باستخدام مكتبة jQuery.

ستسمح لنا JavaScript بضمان الحركة السلسة من أسفل الصفحة إلى الأعلى، وتجنب "التشنج" الذي يحدث عند استخدام "مرساة" عادية.

تظهر فقط عند التمرير لأسفل الصفحة بعدد معين من وحدات البكسل، والتي يمكنك تعيينها بنفسك.

يعد هذا أيضًا مناسبًا جدًا لأنه يجذب انتباه الشخص إلى عنصر تفاعلي على الصفحة ويلاحظ أن هناك فرصة لاستخدام مثل هذه الوظيفة.

للحصول على عرض توضيحي للبرنامج النصي وتحليل مفصل للكود، راجع الفيديو أدناه.

نظرة عامة مختصرة عن الدرس (شاهد الفيديو لمعرفة كافة التفاصيل):

Index.html

1. أول شيء نحتاجه هو الملف الذي سيتم فيه وضع رابط "العودة إلى الأعلى" نفسه. فليكن Index.html.

لكي يعمل كل شيء، في القسم رأسفي المستند، نحتاج إلى تضمين ملف نمط وملفين JavaScript (سنتحدث عنهما لاحقًا):

نقوم أولاً بتضمين مكتبة jQuery، ثم ملف script.js مع الكود الذي نكتبه بأنفسنا.

نحتاج أيضًا في هذا الملف إلى وضع الرابط نفسه، عند النقر عليه سيؤدي إلى صعود سلس إلى أعلى الصفحة:

قمة

script.js

2. والثاني هو ملف script.js، الذي نكتب فيه الوظائف التي تؤدي الإجراءات الأساسية:

$(document).ready(function())( $(function ()( $("#back-top").hide(); $(window).scroll(function ()( if ($(this). التمريرTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); انقر(وظيفة ()( $("body,html").animate((scrollTop:0 ), 800);

لذلك، ننتظر أولاً حتى يتم تحميل المستند بالكامل ونقوم بإخفاء زر "العودة إلى الأعلى" بحيث لا يكون مرئيًا في البداية على الصفحة.

بعد ذلك، نقوم بالتقاط حدث تمرير النافذة وإذا انخفض التمرير بمقدار 700 بكسل أو أكثر، فإننا نعرض زر "الرجوع إلى الأعلى" بسلاسة باستخدام الطريقة اختفي. وإلا فإننا نخفيه باستخدام الطريقة تتآكل.

في الوظيفة المجهولة الثانية، نقوم بتتبع حدث النقر على الرابط داخل الكتلة #الخلفيةوتطبيق الطريقة تحريكللصعود السلس إلى أعلى الصفحة (scrollTop:0) خلال 800 مللي ثانية.

style.css

3. وثالثًا، هذا هو ملف النمط. في مثالنا لا يوجد شيء غير ضروري فيه، لذلك هناك عدد قليل من الأنماط:

النص (حجم الخط: 13 بكسل؛ ارتفاع الخط: 1.65em؛ عائلة الخط: Verdana، sans-serif؛) p (الهامش الأيسر: 150 بكسل؛) /* زر الرجوع إلى الأعلى */ #back-top( الموضع: ثابت؛ الأسفل: 10 بكسل؛ اليسار: 0 بكسل؛) #الجزء الخلفي أ (العرض: 55 بكسل؛ العرض: كتلة؛ محاذاة النص: المركز؛ الخط: 11 بكسل/100% Arial، Helvetica، sans-serif؛ تحويل النص: أحرف كبيرة زخرفة النص: لا شيء؛ لون الخلفية: شفاف؛ -moz-transition:1s) /* سهم الرسم */ #back-topspan( width:55px; height:1600px;display:block; Margin-bottom:7px; الخلفية: url("../img/up-arrow.png") مركز سفلي بدون تكرار؛ -moz-transition:1s ) #back-top a:hoverspan(background-color: rgba(0, 0، 0، 0.3)؛)

وما يستحق الذكر هو المعنى مُثَبَّتللممتلكات موضعفي الكتلة #الخلفية. يتيح لنا ذلك إصلاح موضع الزر بالنسبة لنافذة المتصفح.

في المواقع التي تحتوي على قدر كبير من المحتوى (على سبيل المثال، المدونات)، تحتاج ببساطة إلى استخدام زر "الرجوع إلى الأعلى". بعد كل شيء، قد يحتاج المستخدم الذي قرأ مقالة طويلة إلى العودة إلى أعلى الصفحة لمواصلة التنقل في الموقع. أو يقوم الزائر، قبل قراءة المقال بأكمله، بتمريره من البداية إلى النهاية ويتصفح العناوين والصور والرسوم البيانية ليقيم مسبقًا ما إذا كانت المقالة تستحق القراءة أم لا. عادةً، في مثل هذه الحالات، في حالة عدم وجود الزر "العلوي"، يقوم الزائر ببساطة بالتمرير لأعلى الصفحة باستخدام عجلة الماوس أو باستخدام التمرير (في جانب المتصفح).

ولذلك، لسهولة التنقل في الموقع، يتم استخدام زر تمرير الصفحة. يمكنك إنشاء مثل هذا الزر إما بدون استخدام JavaScript (باستخدام CSS فقط) أو باستخدامه. دعونا نلقي نظرة على أبسط تطبيقات هذه الأساليب.

الزر إلى الأعلى: HTML+CSS

ميزة هذه الطريقة هي سهولة الاستخدام (لا حاجة لاستخدام مكتبات أو نصوص برمجية إضافية).

الزر العلوي مع CSS - "Nubex" .topNubex ( الموضع: ثابت؛ اليمين: 45 بكسل؛ الأسفل: 45 بكسل؛ ) الأعلى

تتمثل عيوب هذه الطريقة في أنه في هذه الحالة لا يمكن أن يكون التمرير سلسًا ويتم إعادة توجيه الزائر على الفور إلى أعلى الصفحة.

الزر إلى الأعلى: جافا سكريبت

تستخدم الطريقة أدناه مكتبة JQuery. إنه سهل الاستخدام ويسمح لك بتمرير الصفحة بسلاسة.

الزر العلوي باستخدام JavaScript - "Nubex" #topNubex ( الموضع: ثابت؛ اليمين: 45 بكسل؛ الأسفل: 45 بكسل؛ ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) )); $("#topNubex").click( function() ( $("body,html").animate((scrollTop:0),700); ));

يستخدم هذا المثال صورة كخلفية للزر. يمكنك تخصيص عرض الزر باستخدام أنماط CSS (الحجم واللون والمخطط التفصيلي والشفافية وما إلى ذلك). وبالتالي، تعتبر هذه الطريقة أكثر مرونة وتوفر المزيد من الخيارات عند إضافة زر "الرجوع إلى الأعلى" إلى موقعك.

29.06.2014 0 6348

لقد رأى الكثير منكم أنه في بعض المواقع، عند التمرير في نافذة المتصفح، يظهر زر "الرجوع إلى الأعلى" في مرحلة ما. إذا قمت بالنقر فوقه، يبدأ شريط التمرير في الترجيع بسلاسة إلى الأعلى. سوف تتعلم كيفية تنفيذ زر "الرجوع إلى الأعلى" بسلاسة باستخدام jQuery من هذه المقالة.

لغة البرمجة

أولاً، لنقم بإنشاء الزر الخاص بنا بلغة html.

قمة

CSS

دعونا نضيف الأنماط إلى زرنا

#button-up (العرض: لا شيء؛ اليسار: 0؛ الهامش: 0؛ الموضع: ثابت؛ الأسفل: 50 بكسل؛ المخطط التفصيلي: لا شيء؛ العرض: 52 بكسل؛ اللون: #333333؛ ارتفاع الخط: 30 بكسل؛ زخرفة النص: لا شيء؛ الحشو: 0px 0 28px; الخلفية: url(../images/icon-arrow-black-up.jpg) no-repeat 7px 11px #ffffff; border-radius: 0 4px 4px 0; -نصف قطر الحدود: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; -صندوق الظل: 0 2px 4px #999;

جافا سكريبت ومسج

بعد ذلك، سنقوم بإنشاء وظيفة ستظهر أو تخفي الزر الخاص بنا عند تمرير الصفحة. سنقوم أيضًا بجعل الزر لا يظهر فورًا، ولكن بهامش 50 بكسل في الأعلى. إذا كانت المسافة إلى الأعلى أقل من 50 بيكسل، فسنقوم بإخفاء الزر. للتأكد من أنه عند النقر فوق زر ما، يكون التمرير إلى أعلى الصفحة سلسًا، أضفنا وظيفة الرسوم المتحركة.

$(document).ready(function())( /** * عند التمرير في الصفحة، أظهر الزر أو قم بتمزيقه */ $(window).scroll(function () ( // إذا كان الهامش العلوي أكثر من 50 بكسل ، ثم اعرض زر "الرجوع إلى الأعلى" إذا ($(this).scrollTop() > 50) ( $("#button-up").fadeIn(); ) else ( $("#button-up") .fadeOut(); ) )); * عند النقر على الزر، ننتقل إلى أعلى الصفحة */ $("#button-up").click(function () ( $("body,html") .animate((scrollTop: 0), 500);

هذا كل شيء، الزر جاهز للاستخدام. ولا تنس أيضًا توصيل إطار عمل jQuery أولاً.

 

قد يكون من المفيد أن تقرأ:

• اختصارات لوحة مفاتيح Windows الأكثر فائدة (المفاتيح السريعة) اختصارات لوحة مفاتيح Windows 7;
• برنامج TeamViewer - التحكم في جهاز الكمبيوتر عبر الإنترنت;
• كيفية فتح ملف تعريف في Odnoklassniki;
• كيفية إلغاء تجميد صفحة فكونتاكتي دون مساعدة خارجية في بضع دقائق;
• البرامج الثابتة لـ mi band - مكان التنزيل وكيفية تثبيت أحدث البرامج الثابتة لـ Xiaomi mi band 2;
• استعادة IMEI من خلال القائمة الهندسية;
• لوحة التحكم باللمس سالدا ستاتش;
• كيفية تغيير كلمة المرور على جهاز كمبيوتر أو كمبيوتر محمول;