نحوه ایجاد نوار پیشرفت مطالعه با جاوا اسکریپت

نوار پیشرفت مطالعه در سایت‌ها ابزاری است که به کاربران این امکان را می‌دهد تا میزان پیشرفت خود را در خواندن مطالب آن صفحه، رصد کنند. به‌عبارتی دیگر، در سایت‌های خبری و یا سایت‌هایی که مقاله در آن وجود دارد، نواری دیده می‌شود که کاربر به هر میزانی که اسکرول می‌کند، این نوار هم پُر تر می‌شود. این نشان می‌دهد که چند درصد از صفحه مطالعه شده و چند درصد باقی مانده است. نحوه نمایش این ابزارها معمولاً با نوار رنگی است. در این ویدئو نحوه ایجاد نوار پیشرفت خواندن با جاوا اسکریپت را بررسی می‌کنیم که تنها با ۳ خط کدنویسی ایجاد می‌شود.

مزایای ایجاد نوار پیشرفت خواندن چیست؟

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

علاوه‌بر این‌ها، نوار پیشرفت خواندن به کاربران این امکان را می‌دهد تا مؤثرتر و سازماندهی‌شده‌تر مطالب را مطالعه نمایند و زمان خود را بهتر مدیریت کنند. همچنین کاربران می‌توانند در هنگام مطالعه مطالب سایت، تمرکز بیشتری داشته باشند؛ چراکه دیگر نیازی به سرچ در مطلب نداشته و به‌راحتی و با کمک نوار اسکرول می‌توانند به همانجایی که لازم دارند، بازگردند. به‌طور کلی، مزایای ایجاد نوار پیشرفت مطالعه را می‌توان موارد زیر نام برد:

• زیبایی سایت
• مرور مجدد بخشی از مطالب
• سازماندهی مؤثرتر
• صرفه‌جویی در زمان
• افزایش تمرکز

نحوه ایجاد نوار پیشرفت مطالعه در وب سایت با جاوا اسکریپت

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

برای اینکار، در header یک style را ایجاد می‌کنیم که header را بخواند؛ با تنطیمات: position: fixed و tip: 0 و z-index: 1 و width: 100% همراه با تنظیمات رنگ بک گراند.

در ادامه ایجاد نوار پیشرفت خواندن، یک progress-bar-cintainer ایجاد می‌کنیم؛ با تنطیمات width: 100% و height: 10px به‌همراه تنظیم رنگ بک گراند.

در نهایت نیز یک progress-bar ایجاد می‌کنیم؛ با تنظیمات height: 10px و width: 0 و با تنظیم رنگ بک گراند.

در ادامه و در تگ body، به‌سراغ تنظیم اسکریپت می‌رویم. با ایجاد تگ script، می‌خواهیم تنظیم کنیم که صفحه هرچقدر اسکرول شد، پهنای progress-bar کم و زیاد شود. برای اینکار به ترتیب زیر عمل می‌کنیم:

همچنین اگر قصد دارید نمایش و پر شدن نوار پیشرفت مطالعه از سمت راست به چپ باشد، در قسمت هدر، direction: rtl را قرار می‌دهیم.

جمع بندی 

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

همانطور که در این ویدئو نحوه ایجاد نوار پیشرفت مطالعه نیز بررسی کردیم، به‌راحتی می‌توانیم تنها با ۳ خط کدنویسی جاوا اسکریپت، این فیچر جذاب را به صفحات وب اضافه کنیم‌.