رفع مشکل فضای خالی بعد از رفرش صفحه
اگر سایتی دارید که عرض صفحه زیاد است قطعا زمانی که کاربر قصد رفرش کردن صفحه را دارد ممکن است این عملیات را از میانهی صفحه انجام دهد. در این زمان است که ممکن است بین بخشهای مختلف صفحه فضای خالی ایجاد شود و این تنها مشکل مرورگر و جاوااسکریپت است. یکی از مشکلهایی که سایتهای وردپرسی هم بیشتر از همه با آن درگیر هستند همین مشکل است. در این نوشته یک قطعه کد یک خطی چاره ساز مشکل شما خواهد شد.
رفع مشکل فضای خالی بعد از رفرش صفحه
خب همانطور که گفتیم این مشکل دقیقا زمانی رخ میدهد که مثلا کاربر در وسط صفحه است و در همان جا کلید F5 یا Reload را در مرورگر بزند؛ وقتی کاربر به سمت بالا میآید یک فضای خالی برای اون ایجاد میشود که این فضا در واقع تنها هنگام نمایش ایجاد میشود و آن فضا هیچ المانی نیست. یک نکتهی جالب اینکه اگر در همان زمان روی آن بخش کلیک راست کنید و گزینهی inspect elements را بزنید آن فضا از بین میرود. حالا راه حل رفع این مشکل این است که شما قطعه کد زیر را در بخش head صفحهی خود قرار دهید.
کد:
<script>window.scrollTo(0,0);</script>
در واقع کد بالا تنها این کار را انجام میدهد که در زمان لود صفحه اسکرول به بالاترین بخش منتقل شود و هیچ مشکل دیگری برای سایت شما ایجاد نخواهد کرد.
اگر روش بالا چاره ساز مشکل شما نشد و یا روش های بهتری برای حل این مشکل در اختیار دارید در بخش نظرات برای ما بنویسید.