با سلام خدمت شما کاربران محترم و با آموزش ویژه امروز در خدمت شما هستم.
امروز به آموزش ساخت دکمه بالابر توسط جی کوئری می پردازیم. پس با ما همراه باشید.
دکمه بالا بر در صفحه
در بعضی از صفحات وب گاهی طراحان به علت طولانی بودن مطالب صفحه تصمیم می گیرند تا دکمه ای جهت
هدایت کاربران به بالاترین نقطه صفحه طراحی کنند. هنگامی که صفحه کاملا بارگزاری می شود
این دکمه از دید کاربران مخفی است. هنگامی که صفحه به پایین اسکرول می شود
این دکمه در گوشه و پایین صفحه نمایان می شود و کاربران با کلیک به روی آن
مجدد به بالای صفحه هدایت می شوند. ساخت این دکمه توسط
جی کوئری به راحتی انجام میشود.
پس ابتدا توسط CSS این دکمه را طراحی می کنیم و سپس توسط جی کوئری برنامه نویسی لازم را روی این دکمه انجام می دهیم.
پیش نیازها
برای یاد گیری این بخش لازم است تا با مفاهیم زیر آشنا باشید:
طراحی دکمه در HTML
دکمه مورد نظر در یک تگ <a> قرار داده می شود و متن آن
Back to Top در نظر گرفته شده است. سعی کنید این تگ بعد از تگ
<body> قرار داده شود و فرزند هیچ تگ دیگری نباشد. همچنین مقدار
مشخصه id="Back-to-Top" تعیین می شود.
طراحی دکمه بالا بر با css
در این پروژه مکان دکمه در پایین و سمت راست و به صورت ثابت در صفحه قرار می گیرد. پس position:fixed; و button:50px; و right:50px; مقداردهی می شوند.
برنامه نویسی دکمه بالابر در جی کوئری
حال بایستی دکمه بالابر پنهان خود را شرایطی که کاربر 300 پیکسل از بالا به سمت پایین اسکرول می کند نمایان کنیم. بنابر این روی رویداد scroll برای window این شرط را تعیین می کنیم.
متد scrollTop() مقدار فاصله عنصر تعیین شده تا بالاترین نقظه صفحه را محاسبه می کند. پس اگر این مقدار بیشتر از 300 شد دکمه بالا بر توسط متد show() نمایان می شود و اگر کمتر از این مقدار شد دکمه بالابر توسط متد hide() مخفی می شود.
سپس بایستی روی رویداد click مشخصه #Back-To-Top تعیین کنیم که پس از کلیک کاربر روی این دکمه صفحه به صورت animation به سمت بالا هدایت شود.
در کد بالا ابتدا از اجرای عمل اصلی دکمه که href است جلوگیری
می شود. با این کار دکمه از حالت لینک شدن به صفحه دیگر خارج می شود. برای
این کار پارامتری به نام e (این نام کاملا اختیاری است) که همان رویداد
اصلی دکمه است ارسال کردیم و توسط تابع preventDefault() از رویداد پیش فرض آن جلوگیری کردیم. سپس توسط تایع animation() برای عناصر html و body مقدار scrollTop را برابر 0 قرار دادیم تا صفحه با سرعت 500 به بالا هدایت شود.
کل کدهای jquery به این صورت میشود.
$("#Back-to-Top").click(function(e){ e.preventDefault(); $('html,body').animate({scrollTop:0},'500'); })
