پرتال تیم آسان وب

یکشنبه 30 اردیبهشت 1403

پرتال تیم آسان وب

ایمیل:
vatan-design

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

آموزش ساخت دکمه برگشت به بالا توسط جی کوئری
  • شناسه محصول
    128
  • Professional Product
  • Easy Install
  • Iranian Product
  • Verified Product
ارسال شده در شنبه 1399/08/17

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

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

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

پیش نیازها

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

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

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

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

کد جی کوئری سی اس اس برگشت به بالا

طراحی دکمه بالا بر با 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;        }
CSS

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

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

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

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

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

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

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

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