وقتی میخوای مستقیم بری وسط یه صفحهی طولانی
حتماً تا حالا تو یه صفحهی طولانی (مثل یه مقالهی بلند یا صفحهی سؤالات متداول) روی یه لینک تو فهرست مطالب کلیک کردی و صفحه بدون رفرششدن، مستقیم رفته سراغ همون بخش خاص. این دقیقاً همون کاریه که تو این درس یاد میگیریم: لینکدادن به یه بخش مشخص از یه صفحه، نه کل صفحه.
ایدهی اصلی: id و href با علامت #
این قابلیت از ترکیب دو چیز به دست میاد: یه ویژگی id روی عنصر مقصد، و یه href که با علامت # شروع میشه و به همون id اشاره میکنه.
<a href="#section2">برو به بخش دوم</a>
<!-- کمی پایینتر تو همون صفحه -->
<h2 id="section2">بخش دوم</h2>
<p>این محتوای بخش دوم است.</p>وقتی کاربر روی «برو به بخش دوم» کلیک میکنه، مرورگر بدون بارگذاری مجدد صفحه، مستقیم صفحه رو اسکرول میکنه تا عنصری که id="section2" داره، بالای دید کاربر قرار بگیره.
قوانین مهم ویژگی id
چند نکتهی مهم دربارهی id باید همیشه رعایت بشه:
- مقدار id هرگز نباید با فاصله شروع بشه یا فاصله داشته باشه.
- مقدار id باید تو کل صفحه یکتا (Unique) باشه؛ یعنی دو عنصر مختلف نباید id یکسان داشته باشن.
- تو href، همیشه باید قبل از اسم id، علامت
#بذاری، اما خود ویژگی id هیچوقت # نداره.
<!-- درست -->
<h2 id="prices">قیمتها</h2>
<a href="#prices">مشاهده قیمتها</a>
<!-- اشتباه: تکرار id یکسان برای دو عنصر -->
<h2 id="prices">قیمتها</h2>
<h2 id="prices">تخفیفها</h2>ساخت یه فهرست مطالب (Table of Contents)
یکی از رایجترین کاربردهای این تکنیک، ساخت فهرست مطالب برای مقالات طولانیه:
<h1>راهنمای کامل قهوه دمکردن</h1>
<ul>
<li><a href="#intro">مقدمه</a></li>
<li><a href="#tools">ابزار مورد نیاز</a></li>
<li><a href="#steps">مراحل دمکردن</a></li>
</ul>
<h2 id="intro">مقدمه</h2>
<p>قهوه یکی از محبوبترین نوشیدنیهای دنیاست...</p>
<h2 id="tools">ابزار مورد نیاز</h2>
<p>برای دمکردن قهوه به این وسایل نیاز داری...</p>
<h2 id="steps">مراحل دمکردن</h2>
<p>مرحله اول، آب را تا دمای مناسب گرم کنید...</p>تو این مثال، کاربر با کلیک روی هر آیتم از لیست بالای صفحه، مستقیم به همون بخش مربوطه پرت میشه، بدون اینکه نیاز باشه کل صفحه رو اسکرول کنه تا اون بخش رو پیدا کنه.
لینکدادن به بخشی از یک صفحهی دیگر
این تکنیک محدود به همون صفحه نیست؛ میتونی از یه صفحه به بخش مشخصی از یه صفحهی دیگه هم لینک بدی. کافیه اسم فایل مقصد رو قبل از # بنویسی:
<a href="article.html#conclusion">مشاهده نتیجهگیری مقاله</a>تو این مثال، کاربر اول به فایل article.html منتقل میشه، و بعد مرورگر خودکار صفحه رو تا بخشی که id="conclusion" داره، پایین میبره.
لینک به بالای صفحه (Back to Top)
یه کاربرد دیگهی رایج، ساخت یه دکمهی «بازگشت به بالا» تو صفحات طولانیه:
<body id="top">
<h1>عنوان صفحه</h1>
<!-- کلی محتوای طولانی -->
<a href="#top">بازگشت به بالای صفحه</a>
</body>یه نکتهی جالب هم اینه که اگه بخوای بدون تعریف هیچ id خاصی مستقیم به بالای صفحه بری، میتونی فقط از href="#" بدون هیچ اسمی استفاده کنی؛ این کار هم معمولاً کاربر رو به ابتدای صفحه برمیگردونه.
تفاوت این روش با اسکرول معمولی صفحه
نکتهی مهمی که باید بدونی اینه که این تکنیک هیچ درخواست جدیدی به سرور نمیفرسته و صفحه دوباره لود نمیشه؛ فقط موقعیت اسکرول تغییر میکنه. این باعث میشه این حرکت خیلی سریع و روان اتفاق بیفته، برخلاف کلیک روی یه لینک معمولی که باعث بارگذاری کامل یه صفحهی جدید میشه.
چند اشتباه رایج
- تکرار یک id یکسان برای چند عنصر مختلف تو یک صفحه، که باعث میشه لینک فقط به اولین موردی که پیدا میکنه بره.
- فراموشکردن علامت # قبل از اسم id تو href.
- گذاشتن فاصله یا کاراکترهای غیرمجاز داخل مقدار id.
- اشتباهگرفتن بین اسم id (بدون #) و مقدار href (با #).
بهترین روشها
- برای مقالات و صفحات طولانی، همیشه یه فهرست مطالب با لینکهای داخلی بساز؛ این کار تجربهی کاربری رو خیلی بهبود میده.
- اسم id ها رو کوتاه، معنادار و بدون فاصله بنویس (مثلاً section2 یا prices، نه section 2).
- مطمئن شو هر id تو کل صفحه فقط یکبار استفاده شده.
نکتهی سئو
گوگل گاهی میتواند لینکهای داخل صفحه (Anchor Links) را در نتایج جستجو بهصورت زیرلینکهای اضافی (Sitelinks) نمایش دهد، مخصوصاً وقتی صفحه یک فهرست مطالب منظم با ساختار heading مناسب داشته باشد.
نکتهی دسترسیپذیری
لینکهای داخل صفحه به کاربران صفحهخوان و همچنین کاربرانی که فقط با صفحهکلید (بدون موس) پیمایش میکنند کمک میکنند تا سریعتر به بخش موردنظرشان برسند، بدون نیاز به عبور از تمام محتوای قبلی صفحه.
جمعبندی
با ترکیب ویژگی id روی عنصر مقصد و href با علامت # در تگ a، میتوان به بخش مشخصی از همان صفحه یا حتی صفحهای دیگر لینک داد. این تکنیک پایهی ساخت فهرست مطالب و دکمههای «بازگشت به بالا» است و بدون بارگذاری مجدد صفحه، فقط موقعیت اسکرول را تغییر میدهد.