با دادن ویژگی id به تگهای html میتونید اونها رو به عنوان مقصد اسکرول مشخص کنید . به طور مثال ما میخوایم لینکی رو در صفحه قرار بدیم که با کلیک روی اون صفحه به جایی اسکرول بشه که یه پاراگراف با آیدی paragraph1 قرار داده . برای همین اول باید این پاراگراف با این آیدی رو در صفحه بزارید (یا اینکه id مذکور رو به یک پاراگراف از قبل موجود اضافه کنید):
<p id="paragraph1">This is a Paragraph !</p>
با انتساب آیدی به هر تگی در صفحه ی html میتونید اونو به عنوان مقصد اسکرول تعیین کنید .
بعد از اینکار با استفاده از یه لینک ساده که به تگ مذکور اشاره میکنه میتونید مبدا اسکرول رو هم مشخص کنید . مثلا لینک زیر رو اگه در صفحه اضافه کنید، با کلیک روی اون به همون پاراگراف بالایی میریم :
<a href="#paragraph1">Go to Paragraph1</a>
با استفاده از علامت # که آیدی تگ بلافاصله بعد از اون اومده میتونید به بخشی از صفحه ی وب که دارای اون آیدی هست لینک بدید
اگر میخواهید با اسکرول نرم به ان قسمت هدابت شوید ادامه مقاله مخصوص شماست:
در اولین مرحله باید کتابخونه ی جی کوئری رو در هدر صفحه ی وب و یا قالب سایت و وبلاگ خودتون به این شکل اضافه کنید :
<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>
بعد از اینکه این تابع رو اضافه کردید قابلیت اسکرول نرم رو به صفحه اضافه کردید و حالا فقط باید از اون استفاده کنید .
Leave a Reply