آموزش ساخت دکمه برگشت به بالا توسط جی کوئری

1396/12/24 علیرضا حاتمی نیا 784

با سلام خدمت شما کاربران محترم وبسایت ilikephp. علیرضا حاتمی نیا هستم و با آموزش ویژه امروز در خدمت شما هستم.
امروز به آموزش ساخت دکمه بالابر توسط جی کوئری می پردازیم. پس با ما همراه باشید.

دکمه بالا بر در صفحه

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

پیش نیازها

برای یاد گیری این بخش لازم است تا با مفاهیم زیر آشنا باشید:

طراحی دکمه در HTML

دکمه مورد نظر در یک تگ  <a> قرار داده می شود و متن آن Back to Top در نظر گرفته شده است. سعی کنید این تگ بعد از تگ <body> قرار داده شود و فرزند هیچ تگ دیگری نباشد. همچنین مقدار مشخصه id="Back-to-Top" تعیین می شود.

<a href="#" id="Back-to-Top">Back To Top</a>

jquery css back to top button

طراحی دکمه بالا بر با css

در این پروژه مکان دکمه در پایین و سمت راست و به صورت ثابت در صفحه قرار می گیرد. پس position:fixed; و button:50px; و right:50px; مقداردهی می شوند.

#Back-to-Top {
            position: fixed;
            display: inline-block;
            right: 50px;
            bottom: 50px;
            background: #2872d8;
            padding: 1em;
            color: white;
            display: none;
        }

برنامه نویسی دکمه بالابر در جی کوئری

حال بایستی دکمه بالابر پنهان خود را شرایطی که کاربر 300 پیکسل از بالا به سمت پایین اسکرول می کند نمایان کنیم. بنابر این روی رویداد scroll برای window این شرط را تعیین می کنیم.

$(window).scroll(function(){
                if($(window).scrollTop()>300) {
                    $("#Back-to-Top").show();
                } else {
                    $("#Back-to-Top").hide();
                }
            })

متد scrollTop() مقدار فاصله عنصر تعیین شده تا بالاترین نقظه صفحه را محاسبه می کند. پس اگر این مقدار بیشتر از 300 شد دکمه بالا بر توسط متد show() نمایان می شود و اگر کمتر از این مقدار شد دکمه بالابر توسط متد hide() مخفی می شود. 
سپس بایستی روی رویداد click مشخصه #Back-To-Top تعیین کنیم که پس از کلیک کاربر روی این دکمه صفحه به صورت animation به سمت بالا هدایت شود.

$("#Back-to-Top").click(function(e){
                e.preventDefault();
                $('html,body').animate({scrollTop:0},'500');
            })

در کد بالا ابتدا از اجرای عمل اصلی دکمه که href است جلوگیری می شود. با این کار دکمه از حالت لینک شدن به صفحه دیگر خارج می شود. برای این کار پارامتری به نام e (این نام کاملا اختیاری است) که همان رویداد اصلی دکمه است ارسال کردیم و توسط تابع preventDefault() از رویداد پیش فرض آن جلوگیری کردیم. سپس توسط تایع animation() برای عناصر html و body مقدار scrollTop را برابر 0 قرار دادیم تا صفحه با سرعت 500 به بالا هدایت شود. 
کل کدهای jquery به این  صورت میشود.

$("#Back-to-Top").click(function(e){
                e.preventDefault();
                $('html,body').animate({scrollTop:0},'500');
            })