در وب سایت های تک صفحه ای با کلیک کردن بر روی لینک های منو به جای اینکه تمامی صفحه مجدد بارگذاری شود ، با تکنیک هایی که در این مقاله به آن می پردازیم صفحات متفاوت در همان صفحه اصلی با اسکرول کردن نمایان می شوند.
راه های آسان برای پیاده سازی وب سایت ها با اسکرول زیاد
در طراحی وب سایت حداقل ۳ نوع وب سایت تک صفحه ای وجود دارد، در ابتدایی ترین حالت این نوع تمامی محتوا در یک صفحه گنجانده می شود اما فقط قسمتی از آن در مرکز صفحه نمایش قابل مشاهده است.
در سایت های تک صفحه ای می توان با کلیک کردن بر روی لینک های منو، به جای اینکه تمامی صفحه بخواهد به صورت کامل بارگذاری شود ، با اسکرول اسلاید شدن محتوا را مشاهده کنید.
در اغلب موارد نوار اسکرول در کنار مرورگر قابل مشاهده است، بنابراین می توان با لغزاندن به بالا و پایین نوار اسکرول تمامی صفحه را مشاهده کرد.
تصویر زیر نمونه ای از یک وب سایت تک صفحه ای می باشد که اسکرین شات آن در زیر قابل مشاهده است.
لینک وب سایت:
Eshbeata.com
توضیحات:
- صفحه اول در بالا قرار می گیرد
- صفحه دوم از قسمت image gallery شروع می شود
- صفحه سوم از جایی قرار می گیرد که خاک زمین شروع می شود
- صفحه آخر جایی میان اقیانوس قرار دارد.
وب سایت های تک صفحه ای را طبق مسیری که اسکرول می شوند می توان طبقه بندی کرد . طبقه بندی ها به شرح زیر می باشد:
اسکرول عمودی(عمومی ترین نوع)
اسکرول افقی
اسکرول دو بعدی
در ادامه این مقاله به بررسی وب سایت های با اسکرول عمودی می پردازیم.
سوال های مهم در زمان ایجاد یک وب سایت تک صفحه ای:
1. آیا قرار است وب سایت :
- از ابتدای صفحه شروع و به سمت پایین اسکرول شود؟
- از انتهای صفحه لود شود و به سمت بالا اسکرول شود؟
- یا از میانه صفحه لود شود و به قسمت های دیگر اسکرول شود؟
۲. چطور می خواهید قسمت های مختلف را از یکدیگر متمایز کنید؟
۳. آیا وب سایت شما به مانند یک سفر همانند وب سایت قرار است از روی زمین به اعماق دریا سفر کند؟
۴. آیا هر صفحه قرار است دارای یک رنگ یا تصویر زمینه خاص باشد؟
۵. آیا قرار است از یک کار گرافیکی و وکتوری برای تعیین مرز بین صفحات استفاده کنید؟
۶. آیا در کل هیچ تفاوتی بین صفحات نباشد ؟
۷. آیا بین صفحات تداخل وجود خواهد داشت ؟
حال نگاهی به ساختار HTML برای این نوع از وب سایت می اندازیم.
ساختار HTML وب سایت های تک صفحه ای بسیار ساده است ، آیا تا به حال صفحات پرسش و پاسخ را مشاهده کرده اید؟
زمانی که روی لینک سوال کلیک می شود صفحه اسکرول شده و روی پاسخ آن می رود،این همان تکنیکی است که قرار است استفاده شود.
به طور ساده، طبق معمول با تگ های مربوطه یک منو می سازیم با این تفاوت که در تگ a در قسمت ” href=”Link Addressباید به جای آدرس لینک علامت پوند("#") را قبل از نام منحصر به فرد id مخصوص هر صفحه قرار دهید.
این کار باعث می شود تا مرورگر در همان صفحه به دنبال لینک مورد نظر بگردد و صفحه را به آیدی مورد نظر اسکرول کند بدون اینکه صفحه مجددا بارگذاری شود. این کار برای سئو سایت بسیار موثر می باشد.
بنابراین اگر "سه صفحه" را در یک تک صفحه می خواهید باید برای هر صفحه در HTML یک آیدی منحصر به فرد قرار دهید و آیدی div مورد نظر را با تگ a آن همنام قرار دهید.
اسکرول نرم با استفاده از JQuery
برای اینکه اسکرول صفحه ایجاد شده به نرمی انجام شود می توان از jquery کمک گرفت فقط کافی است تا تکه کد زیر در فایل html کپی شود.
نیازی به تغییر خاصی در هدر نیست و همچنین نیازی ندارد تا فایل JQuery در فضای هاست میزبانی شود.
اگر در جایی از نوار اسکرول کلیک شود مشاهده می شود که اسکرول به نرمی انجام خواهد شد.