کدک انیمیشن لینک های داخلی صفحه

امروز می خواهم این کدک را برایتان بگذارم که با استفاده از آن می توانید کاربر را به لینک های داخلی (یعنی لینک هایی که # دارند) با ترنزیشن اسکرول ( scroll transition ) ، یعنی به شکلی شناور ، منتقل کنید.

مقدمه

برای فهمیدن این کدک شما باید با کد های جی کوئری (JQuery) و اچ تی ام ال (HTML) آشنا باشید. از آنجایی که قرار است در کدَک از جی کوئری استفاده کنیم اول از همه ، کتابخانه ی جی کوئری را در صفحه لود می کنیم:

<<<code>>>

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script>

<<</code>>>

می توانید قسمت قرمز رنگ (کتابخانه ی جی کوئری) را از گوگل دریافت کنید. (این لینک از گوگل است) البته کتابخانه ی جی کوئری ای که در سایت ما هم هست به روز است و می توانید از همان استفاده کنید.

تابع animate در جی کوئری

در اینجا باید شما را با تابعی در جی کوئری آشنا کنم که وظیفه ی ایجاد انیمیشن را بر عهده دارد. با استفاده از این تابع شما می توانید به اشیا صفحه انیمیشن بدهید به شکلی که به طور ناگهانی از حالتی به حالت دیگر تغییر شکل ندهند. این تابع برای تمام ویژگی های سی اس اس قابل استفاده نیست. (موارد قابل استفاده را از این مطلب ببینید)

<<<code>>>

$(selector).animate( { "cssProperty":value , ... }, animationTime ); // time is in milisecond

<<</code>>>

قسمت قرمز رنگ برای وارد کردن selector های css است.

قسمت آبی رنگ برای وارد کردن ویژگی هایی از سی اس اس است که می خواهید آن را تغییر دهید. در اصل این قسمت یک شی جاوا اسکریپت است که به صورت آرگومان به تابع animation داده می شود.

برای به دست آوردن اطلاعات بیشتر در باره ی این تابع در اینترنت جستجو کنید.

انیمیشن دادن به اسکرول صفحه با تابع animation

حال با استفاده از تابعی که با آن آشنا شدیم می خواهیم به اسکرول صفحه انیمیشن بدهیم.

<<<code>>>

$("html, body").animate( {"scrollTop": 100}, 2000 );

<<</code>>>

خوب! اگر کد بالا را در صفحه ای که کتابخانه ی جی کوئری را دارد اجرا کنید می بینید که صفحه به آرامی به قسمتی از صفحه منتقل می شود. این قسمت از صفحه ، در فاصله ی 100 پیکسلی اسکرول از بالای صفحه است.

قسمت قرمز رنگ: علت انتخاب کردن html, body در این قسمت این است که در مرورگر ها ، اسکرول صفحه ، در اصل اسکرول این تگ هاست که مرورگر به طور خودکار آن را تنظیم می کند. پس ما برای تغییر اسکرول صفحه باید به اسکرول این تگ ها دسترسی پیدا کنیم.

یک مثال

حال با استفاده از چیز هایی که می دانید می توانیم لینکی به شکل زیر درست کنیم (با کلیک بر رو چنین لینکی طی دو ثانیه به فاصله 100 پیکسل از بالای صفحه منتقل می شوید) :

<<<code>>>

<a href="#" onclick="$('html, body').animate( {'scrollTop': 100}, 2000 ); return false;" title="click me">click me</a>

<<</code>>>

اجرای آنلاین کد بالا

اما همان طور کی می بینید این لینک حالت ایستا (static) دارد. یعنی باید به صورت دستی تنظیم شود و برای حالت های مختلف قابل استفاده نیست. به علاوه اگر بخواهیم چنین کاری را برای تمام لینک های صفحه انجام دهیم بسیار وقت گیر است و در اندازه های مختلف صفحه نمایش به درسی کار نخواهد کرد. چون ما می خواهیم کاربر دقیقا به نقطه ای از صفحه که می خواهیم منتقل کنیم.

تابعی پویا برای لینک های داخلی صفحه

حال برای این که بتوانیم کار مثال بالا برای هر آی دی از صفحه انجام دهیم از تابع زیر استفاده می کنیم. (همان طور که حتما می دانید ، چیزی که در آدرس صفحه بعد از # قرار می گیرد در اصل آی دی یک شی در صفحه است)

<<<code>>>

function goToId( hash, animationTime )

{

   var target = hash,

      scrollTop = target != "" ? $(target).offset().top : 0; // به دست آوردن فاصله شی با بالای صفحه

      $('html, body').stop().animate({ // توقف دیگر انیمیشن ها و شروع انیمیشن اسکرول

         'scrollTop': scrollTop

      }, animationTime, 'swing', function () {

      window.location.hash = target; // نمایش آدرس جدید در نوار مرورگر

   });

}

<<</code>>>

اجرای آنلاین کد بالا

قسمت قرمز رنگ بررسی می کند اگر target برابر با "" (خالی) نبود با استفاده از مقدار آن اختلاف از بالا را به دست آورد (offset().top). اما اگر اینطور نبود مقدار را برابر صفر قرار میدهد. مقدار خالی زمانی رخ میدهد که شما در جلوی # هیچ چیز ننویسید. این یعنی این که لینک باید کاربر را به بالا ترین قسمت صفحه منتقل کند.

کد های بالا را با دقت ببینید و سعی کنید متوجه بشوید که چگونه کار می کنند.

استفاده از تابع پویا برای تمام لینک های صفحه

حالا که ابزار مورد نیاز را داریم باید آن را برای تمام لینک های صفحه فعال کنیم. (البته قرار نیست دونه دونه این کار رو بکنیم )

<<<code>>>

$('a[href^="#"]').click(function (e) {

   e.preventDefault(); // حالت پیشفرض این رویداد را از بین می برد

   goToId(this.hash, 750); // انیمیشن در 750میلی ثانیه

});

<<</code>>>

با نعمت جی کوئری ما می توانیم خیلی راحت این کار را با 3 خط کد انجام دهیم.

با انتخابگر (قسمت قرمز رنگ) ما تمام لینک های صفحه که دارای مقدار # در آدرسشان هستند را انتخاب می کنیم و برای آن ها رویداد کلیک را تعریف می کنیم که بعد از کلیک تابع مشخص شده اجرا شود.

قسمت آبی رنگ: هر شی a (تگ لینک) در صفحه دارای مقدار hash است. این مقدار همان قسمت # لینک است.

نکته ی مهم: برای این که کد به درستی کار کند و بر روی تمام لینک های صفحه اعمال شود باید یا آن را در آخر کد های صفحه یا در رویداد onload جاوا اسکریپت برای صفحه یا در رویداد ready جی کوئری برای داکیومنت قرار دهید.

<<<code>>>

$(document).ready( function(){

   // ... کد اینجا

} );

window.onload = function(){

   // ... کد اینجا

};

<<</code>>>

لقمه ی آماده ی کد ها

<<<code>>>

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script>

<script>

function goToId(c,d){var b=c,a=b!=""?$(b).offset().top:0;$("html, body").stop().animate({scrollTop:a},d,"swing",function(){window.location.hash=b})}$(document).ready(function(){$('a[href^="#"]').click(function(a){a.preventDefault();goToId(this.hash,750)})});

</script>

<<</code>>>

با قرار دادن کد های بالا در قسمت head قالب ، این کدک را در صفحه ی وبلاگ یا سایت خود داشته باشید. (بدون هیچ زحمتی)

دموساز - نتیجه ی نهایی کد ها

حتما سوال های خود را در انجمن یا نظرات همین بخش مطرح کنید.