آخرین بازبینی: ۱۴۰۳/۰۹/۱۱

ساخت منوهای پیمایش ملایم برای سایت تک صفحه‌ای

معمولا در سایت‌های تک صفحه‌ای، منوها به شکلی طراحی می‌شوند که هنگام کلیک روی آن‌ها، صفحه به صورت ملایم و نرم به قسمت مورد نظر حرکت می‌کنند. انجام این کار با استفاده از کدهای جاوااسکریپت و جی‌کوئری به آسانی امکان پذیر است.

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

اضافه کردن کتابخانه jQuery

برای بارگزاری جی‌کوئری، کد زیر را به سرآمد صفحه اضافه کنید.

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

1	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

اضافه کردن تابع

تابع زیر را در قسمتی دلخواه از صفحه بعد از کد jQuery قرار دهید.

<script>
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\/,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace( /#/, '' ) ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           return false;
         });
      }
    }
  });
});
</script>

$(document).ready(function() {

$('a[href*=#]').each(function() {

if (location.pathname.replace(/^\/,'') == this.pathname.replace(/^\//,'')

&& location.hostname == this.hostname

&& this.hash.replace( /#/, '' ) ) {

var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');

var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;

if ($target) {

var targetOffset = $target.offset().top;

$(this).click(function() {

$("#nav li a").removeClass("active");

$(this).addClass('active');

$('html, body').animate({scrollTop: targetOffset}, 1000);

return false;

});

}

});

</script>

پیمایش نرم با استفاده از جاوااسکریپت

مرورگرهای جدید دارای قابلیت پیمایش نرم هستند. در عوض استفاده از دستور animate در کدهای بالا می‌توانید از کدهای زیر که مستقیم در مرورگر اجرا می‌شوند استفاده کنید. این کدها کارایی بهتری دارند و مقدار کمتری پردازنده را درگیر می‌کنند:

window.scrollTo({
	top: targetOffset,
	behavior: 'smooth'
} );

window.scrollTo({

top: targetOffset,

behavior: 'smooth'

} );

ساخت منو

<nav id="nav">
<ul>
	<li><a class="active" title="Next Section" href="#slide1">صفحه اصلی</a></li>
	<li><a title="Next Section" href="#slide2">منوی دوم</a></li>
	<li><a title="Next Section" href="#slide3">منوی سوم</a></li>
	<li><a title="Next Section" href="#slide4">منوی چهارم</a></li>
	<li><a title="Next Section" href="#slide5">منوی پنجم</a></li>
</ul>
</nav>

<ul>

<li><a title="Next Section" href="#slide4">منوی چهارم</a></li>

</ul>

</nav>

ایجاد بخش‌های مورد نظر با ID

سپس به اسلایدها، شناسه یا ID مقصد a ها را که بالاتر تعریف کردیم را مقدار دهی می‌کنیم.
مثلا برای منوی دوم، باید به شکل زیر باشد.

<div id="slide2">...</div>

1	<div id="slide2">...</div>

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

برای دانلود نمونه این آموزش اینجا کلیک کنید: دانلود مثال منوی پیمایش ملایم