حتما در بعضی سایتها دیدید که با کلیک روی بوک مارک ها، صفحه ی وب به صورت آروم و نرم اسکرول میشه. به صورت پیشفرض اسکرول در صفحات وب بک دفعه ای و خیلی تند انجام میشه ولی اگر بخواید اینکار رو زیباتر و روونتر انجام بدید باید از جاوااسکریپت کمک بگیرید . و اگر بخواید باز هم راحتتر این کارو بکنید باید از jQuery بهره بگیرید .
برای همین در پست امروز با استفاده از جی کوئری این کار رو انجام خواهیم داد . اول از همه میتونید دموی زیر رو ببینید که بهتر متوجه بشید منظور از اسکرول نرم (smooth scroll) چیه هسن :
در اولین مرحله باید کتابخونه ی جی کوئری رو در هدر صفحه ی وب و یا قالب سایت و وبلاگ خودتون به این شکل اضافه کنید :
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
در کد بالا jQuery رو از گوگل لود کردیم . شما میتونید آدرس رو عوض کنید و آدرس کتابخونه ی آپلود شده ی خودتون رو قرار بدید .
بعد از لود کردن jquery حالا با نوشتن چند خط کد به شکل زیر قابلیت اسکرول نرم رو به صفحه ی وبتون اضافه میکنید . این کد رو هم در هدر صفحه و بعد از کد قبلی قرار بدید :
<script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script>
بعد از اینکه این تابع رو اضافه کردید قابلیت اسکرول نرم رو به صفحه اضافه کردید و حالا فقط باید از اون استفاده کنید .
برای اینکه از قسمتی از صفحه به جای دیگه ی اون اسکرول کنید باید مبدا و مقصد اسکرول رو تعریف کنید . یعنی اول اون لینکی که با کلیک روی اون به بخش مورد نظر اسکرول میشه و دوم هم مکانی هست که اسکرول به اونجا انجام میشه .
اول بهتره که مقصد اسکرول رو تعین کنید . با دادن ویژگی id به تگهای html میتونید اونها رو به عنوان مقصد اسکرول مشخص کنید . به طور مثال ما میخوایم لینکی رو در صفحه قرار بدیم که با کلیک روی اون صفحه به جایی اسکرول بشه که یه پاراگراف با آیدی paragraph1 قرار داده . برای همین اول باید این پاراگراف با این آیدی رو در صفحه بزارید (یا اینکه id مذکور رو به یک پاراگراف از قبل موجود اضافه کنید):
<p id="paragraph1">This is a Paragraph !</p>
بعد از اینکار با استفاده از یه لینک ساده که به تگ مذکور اشاره میکنه میتونید مبدا اسکرول رو هم مشخص کنید . مثلا لینک زیر رو اگه در صفحه اضافه کنید، با کلیک روی اون با اسکرول نرم به همون پاراگراف بالایی میریم :
<a href="#paragraph1">Go to Paragraph1</a>
براتون آرزوی موفقیت میکنم .
ایا دلیلش می تونه لوود شدن فایل های جی اس در فوتر باشه؟
در حالت کلی برای سئو بهتره که فایلهای مورد نیاز رو در تگ head لود کنید اما لودشدنش در فوتر نباید باعث خطا بشه.
منتها چون بحث ما الان اسکرول هست، بله کار درستی که بره تو فوتر نیست و باید از اونجا برش دارید.