رفتن به قسمتی از صفحه با کلیک بر روی لینک بصورت سفارشی

سلام به همه

خوب اگه برنامه نویس هستین (یا حتی اگه نیستین) میدونین که اگه توی یک تگ لینک <a> مقدار href رو آیدی یکی از المان های صفحه قرار بدیم وقتی روی اون لینک کلیک کنیم صفحه به اون المان اسکرول میشه خوب تا اینجا همه چیز خوب پیش رفت، پس مشکل چیه؟؟ مشکل وقتی بوجود میاد که مثل من یک سایتی داری طراحی میکنی که منوی بالای سایت ثابت هست. خوب این چه ایرادی داره؟؟ ایرادش اینه که وقتی منوی بالا ثابت هست و ما به یکی از المان های صفحه اسکرول میشیم منو روی اون المان قرار میگیره و بخشی از المان میره زیر منو و دیده نمیشه، خوب چرا اینجوری میشه؟؟ واضحه دیگه وقتی به کامپیوتر میگی منو ببر به المان X شما رو به جایی از صفحه میبره که ابتدای اون المان بچسبه به بالای صفحه خوب بالای صفحه هم که منوی ما جا خوش کرده ولی کامپیوتر اینو نمیدونه و اصلا به این چیزا اهمیت نمیده، خوب راهکار چیه؟

من خیلی دنبال راه حل این موضوع گشتم (من معمولا رفرنس های خارجی رو سرچ میکنم) ولی چیزی پیدا نکردم تا اینکه....

البته راهکارهایی پیدا کردم که گفته بودن با جاوااسکریپت میشه این کار رو کرد ولی به دل من که ننششت.

خوب بیشتر و بیشتر سرچ کردم تا اینکه....

بله از اونجایی که جوینده یابنده ست (البته نه همیشه، و من واقعا ناامید شده بودم) یک راه حل خیلی عالی برای این کار پیدا کردم و اونقدر خوشحال شدم که گفتم بیام اینجا و این راه حل رو با بقیه به اشتراک بزارم و هم اولین پستم توی ویروگول متولد بشه هم مشکل یک عده مثل من حل بشه

برای این کار کافیه به استایل های body این کد رو اضافه کنیم:

scroll-snap-type: y mandatory;

و به استایل های المان هدف مون این کد رو اضافه کنیم:

scroll-margin: 100px;

بجای اون 100 پیکسل هر عددی رو که میخاین بزارین تا وقتی صفحه به اون المان اسکرول میشه به اندازه 100 پیکسل (یا هر مقدار دیگه ای که شما اونجا نوشته باشین) قبل از رسیدن به المان توقف کنه.

امیدوارم این آموزش به کار تون بیاد و مشکل تونو حل کنه.