حتما در بعضی سایتها دیدید که با کلیک روی بوک مارک ها، صفحه ی وب به صورت آروم و نرم اسکرول میشه. به صورت پیشفرض اسکرول در صفحات وب بک دفعه ای و خیلی تند انجام میشه ولی اگر بخواید اینکار رو زیباتر و روونتر انجام بدید باید از جاوااسکریپت کمک بگیرید . و اگر بخواید باز هم راحتتر این کارو بکنید باید از 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>
با انتساب آیدی به هر تگی در صفحه ی html میتونید اونو به عنوان مقصد اسکرول تعیین کنید .
بعد از اینکار با استفاده از یه لینک ساده که به تگ مذکور اشاره میکنه میتونید مبدا اسکرول رو هم مشخص کنید . مثلا لینک زیر رو اگه در صفحه اضافه کنید، با کلیک روی اون با اسکرول نرم به همون پاراگراف بالایی میریم :
<a href="#paragraph1">Go to Paragraph1</a>
با استفاده از علامت # که آیدی تگ بلافاصله بعد از اون اومده میتونید به بخشی از صفحه ی وب که دارای اون آیدی هست لینک بدید .
براتون آرزوی موفقیت میکنم .