با دادن ویژگی 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>

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