كيفية إضافة زر العودة إلى الأعلى في Squarespace

سوف يشكرك عملاؤك عند معرفة كيفية إضافة زر العودة إلى الأعلى في Squarespace وتطبيقه في موقعك. ولكن هذه الميزة أعقد قليلاً مما تبدو عليه؛ إذ لا يوفر Squarespace زر عودة إلى الأعلى مدمجاً بشكل افتراضي، لذا ستحتاج إلى الالتفاف حول ذلك باستخدام أداة بدون برمجة (No-code widget)، أو القليل من الأكواد المخصصة، أو رابط ارتساء (Anchor link).

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

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

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

الطريقة الأسهل: استخدام أداة زر العودة إلى الأعلى لـ Squarespace

الخيار الأسرع هو الاستعانة بأداة جاهزة لزر العودة إلى الأعلى. على سبيل المثال، تُعد أداة زر العودة إلى الأعلى من Jotform أداة مجانية لا تتطلب برمجة، ويمكنها تفعيل هذه الأزرار على صفحاتك في غضون دقائق معدودة. يمكنك استخدامها لتصميم زر عائم، وإنشاء كود تضمين، وإضافته مباشرة إلى Squarespace دون كتابة سطر واحد من أكواد CSS أو JavaScript.

تتم العملية على النحو التالي:

1. خصص أداتك. استخدم الرابط أعلاه لفتح منشئ الأدوات من Jotform والبدء في تعديل الإعدادات. يمكنك تغيير أنماط الأيقونة، وتحديد حجم الزر واستدارة زواياه، وحتى اختيار الألوان لتتناسب مع علامتك التجارية. تتيح لك الأداة سهولة تحريك الزر عبر الشاشة، وضبط المسافات عند الحواف، وتبديل خيارات الظهور لمستخدمي أجهزة الكمبيوتر المكتبية والهواتف المحمولة.

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

3. الصق الكود في Squarespace. هنا يأتي دور واجهة Squarespace الحالية، حيث يتوفر أمامك خياران رئيسيان:

• على مستوى الموقع بالكامل (موصى به لأزرار العودة إلى الأعلى): في لوحة تحكم Squarespace، انتقل إلى Pages (الصفحات) في القائمة اليسرى، ومرر لأسفل للعثور على قسم Custom Code (كود مخصص)، ثم انقر فوق Code Injection (حقن الكود). الصق كود التضمين في حقل Footer (التذييل)، ثم انقر فوق Save (حفظ). سيظهر الزر في كل صفحة تلقائياً. (ملاحظة: ميزة حقن الكود على مستوى الموقع متاحة في خطط الأعمال Business والخطط الأعلى).

• لصفحة واحدة فقط: حرر الصفحة التي تريد ظهور الزر فيها، وانقر فوق علامة + لإضافة مكوّن (Block)، ثم اختر Code (كود). الصق كود التضمين هناك واحفظ التغييرات. سيظهر الزر في تلك الصفحة فقط، ولكن يمكنك تكرار هذه الخطوة في أي صفحة أخرى تحتاج إلى الزر.

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

إليك بعض الأسباب العملية التي تجعل هذه الطريقة الخيار الأسهل والأكثر سلاسة:

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

بالنسبة لمعظم مستخدمي Squarespace، تنتهي المهمة عند هذه النقطة. ولكن إذا كنت ترغب في تحكم كامل ودقيق في كل تفصيلة، فواصل القراءة.

طريقة بديلة: إضافة زر العودة إلى الأعلى في Squarespace باستخدام كود مخصص

إذا كنت متمكناً من التعامل مع HTML وCSS والقليل من JavaScript، فيمكنك بناء زر عائم للعودة إلى الأعلى من الصفر تماماً. يدعم Squarespace الأكواد المخصصة رسمياً من خلال لوحة حقن الكود (Code Injection)، ولوحة CSS المخصصة (Custom CSS)، ومكونات الكود الفردية (Code Blocks).

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

إليك كيفية القيام بذلك.

1. اختر مكان وضع الكود. لإضافة زر يظهر على مستوى الموقع بالكامل، انتقل إلى Website → Pages → Code Injection → Footer (الموقع الإلكتروني ← الصفحات ← حقن الكود ← التذييل). يتم حقن الكود المضاف هنا قبل وسم الإغلاق </body> مباشرةً في كل صفحة. أما لإضافة زر لمرة واحدة في صفحة معينة، فمرر مؤشر الماوس فوق الصفحة في لوحة Pages (الصفحات)، وانقر فوق أيقونة الترس، واختر Advanced (متقدم)، واستخدم Page Header Code Injection (حقن كود ترويسة الصفحة) بدلاً من ذلك.
2. أضف كود HTML. أدرج عنصر زر مع معرّف (ID) حتى تتمكن من استهدافه لاحقاً. وغالباً ما يبدو الكود على هذا النحو: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. احرص على الاحتفاظ بسمة aria-label لدعم إمكانية الوصول لبرامج قراءة الشاشة.
3. صمم المظهر باستخدام CSS. الآن يمكنك تعديل مظهر الزر وأدائه باستخدام CSS. ابدأ بفتح لوحة Custom CSS (تحت Website → Website Tools → Custom CSS). حدد موضع الزر كعنصر ثابت (fixed) في الزاوية السفلية اليمنى، ثم أخفِه بشكل افتراضي عن طريق تعيين الخصائص opacity: 0 و pointer-events: none. ستحتاج أيضاً إلى إضافة تأثير انتقالي (transition) يظهر الزر تدريجياً بسلاسة عند إضافة فئة مثل .visible. وأخيراً، عيّن قيمة z-index عالية بما يكفي ليظهر الزر فوق المحتوى، ولكن تحت أي نوافذ منبثقة (modals).
4. أضف منطق JavaScript البرمجي. تحتاج أيضاً إلى كود برمجي صغير يراقب موضع التمرير؛ وبهذه الطريقة يظهر الزر فقط عندما يكون المستخدم بحاجة إليه. على سبيل المثال، بمجرد أن يمرر الزائر الصفحة متجاوزاً حداً معيناً (مثل 300 بكسل)، يضيف الكود تلقائياً الفئة .visible، فيظهر الزر. وإذا نقر المستخدم على الزر، يستدعي الكود الدالة window.scrollTo({ top: 0, behavior: ‘smooth’ })، والتي تعيد تمرير الصفحة إلى الأعلى بحركة انسيابية سلسة.

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

حل بديل بسيط: استخدام رابط ارتساء كاختصار للعودة إلى الأعلى

إذا لم تكن بحاجة فعلية إلى زر عائم — بل تكتفي برابط العودة إلى الأعلى قابل للنقر في أسفل الأقسام الطويلة — فإن ميزة روابط الارتساء (Anchor Links) المدمجة في Squarespace تؤدي الغرض دون أي كود برمجي. وقد أضافت Squarespace هذه الميزة في عام 2025 كجزء من إصدار Squarespace 7.1. إليك كيفية عملها:

1. عيّن نقطة الارتساء في القسم العلوي. انقر فوق Edit (تحرير) في الصفحة التي تريد إضافة اختصار العودة إلى الأعلى فيها. مرر مؤشر الماوس فوق القسم الأول في أعلى الصفحة وانقر فوق Edit Section (تحرير القسم). ومن هناك، مرر إلى حقل Anchor Link (رابط الارتساء) الموجود في أسفل لوحة إعدادات القسم. اكتب اسماً لطيفاً (slug) مثل “top” وانقر فوق أيقونة النسخ للحصول على عنوان URL الخاص بك.

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

3. اختياري: اجعل حركة التمرير أكثر سلاسة. تنقل روابط الارتساء المستخدم إلى أعلى الصفحة بشكل فوري ومفاجئ، مما قد يكون مربكاً ويقطع اندماجه في تصفح موقعك. يمكنك معالجة ذلك بإضافة تأثير تمرير انسيابي لطيف؛ انتقل إلى Website → Pages → Custom CSS (الموقع الإلكتروني ← الصفحات ← CSS مخصص) وأضف ما يلي:

html {

  scroll-behavior: smooth;

}

يطبق هذا السطر الواحد تمريرًا سلسًا على كل رابط ارتساء عبر موقعك بالكامل.

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

ملاحظة: لا تحظى روابط الارتساء بدعم مباشر في أقسام المدونات، أو الفعاليات، أو معارض الأعمال (Portfolio)، أو المتاجر. لاستخدامها في هذه الصفحات، تحتاج إلى إضافة قسم فارغ فوق القسم غير المدعوم وربط نقطة الارتساء به بدلاً من ذلك. ويمكنك ضبط المظهر ليبدو متناسقاً عن طريق إيقاف تفعيل خيار Fill Screen (ملء الشاشة) في إعدادات القسم الفارغ، وإلا ستظهر فجوة غير متناسقة في أعلى الصفحة.

إضافة زر العودة إلى الأعلى دون تعقيد موقعك على Squarespace

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

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

جرّب أداة زر العودة إلى الأعلى اليوم لإضافة زر أنيق للتمرير إلى الأعلى في موقع Squarespace الخاص بك في غضون دقائق. وإذا كنت تستخدم Jotform بالفعل لإنشاء نماذج Squarespace، فستكون خطوات التضمين مألوفة لك منذ النقرة الأولى.