چگونه فقط با استفاده HTML یک دکمه بازگشت به بالا ایجاد کنیم؟

ایجاد دکمه‌ی بازگشت به بالا، در صفحات وب چیزی است که می‌تواند برای کاربر کار را راحت کرده و یک تجربه‌ی خوب را برایش به همراه داشته باشد.

برای ایجاد چنین دکمه‌ای نیز، المان‌ها، افزونه‌ها و کدهای پیچیده‌ی زیادی وجود دارد که هم می‌تواند این کار را برای صاحبان صفحات وب انجام دهد و هم در کنار این، قادر است افکت‌ها و عملکردهای جذاب متنوعی را در صفحه ایجاد کند. این افکت‌ها و عملکردهای خلاقانه با کدهای جورواجوری همچون js، css، html، jquery و … و یا ترکیبی از این زبان‌های مختلف می‌تواند ایجاد شود.

اما اگر بخواهیم در کنار ایجاد چنین دکمه‌ای موضوع سبکی صفحه (که این روزها بسیار برای گوگل و سئو مورد اهمیت است) را نیز مدنظر قرار بدهیم؛ بهتر است قید کدهای سنگین و چالش‌برانگیز را بزنیم.

ساده‌ترین کدهای html برای رفتن به بالای صفحه

کاری که می‌خواهید انجام دهید این است که با استفاده از یک برچسب <a> یک “لنگر” در بالای صفحه قرار دهید (این همان کاری است که برای پیوندهای داخلی هم انجام می‌شود، اما فقط برای پیوندها مفید نیست!). سپس، وقتی پیوندی دارید که به nameofanchor (لنگر نامگذاری شده – named anchor – برچسبی است که به بخشی از یک پیام html اختصاص داده شده، که می‌توانید با کلیک کردن روی پیوندی که در قسمت دیگری از پیام است، به آن بپرید.) می‌رود، به لنگر با آن نام پیمایش می‌کند. شما این کار را به این صورت انجام بدهید:

در بالای نوشتار صفحه‌ی مدنظرتان، یک لنگر با نام مشخص قرار دهید.

<a name=”top”></a>

و سپس پیوند “بازگشت به بالا” را در جایی از صفحه که مدنظر دارید با این کد قرار دهید؛ این نوشتار به کد بالا اشاره خواهد کرد.

<a href=”#top”>بازگشت به بالا</a>

و تمام

البته همان طور بیان شد، چندین گزینه‌ی دیگر با استفاده از jquery و jscript و … وجود دارد که اثرات اضافی را برای‌تان (چه مثبت و چه منفی) به همراه دارد. پس این واقعاً فقط به آنچه شما دنبال آن هستید بستگی دارد.