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

راه وروش وکدهای اچ تی ام ال ساخت لنگرلینک

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

مرحله ۱: تنظیم ساختار HTML

ابتدا، بیایید ساختار HTML صفحه وب خود را تنظیم کنیم. ما یک منوی ناوبری با لینک‌های لنگر به بخش‌های مختلف صفحه ایجاد خواهیم کرد. برای مثال:



کد HTML:
 <nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<div id="section1">
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>This is the content of section 3.</p>
</div>
در این مثال، ما یک منوی ناوبری با لینک‌های لنگر به سه بخش از صفحه ایجاد کرده‌ایم. هر بخش توسط یک تعریف می‌شود. <div>عنصری با شناسه منحصر به فرد.
مرحله ۲: افزودن قابلیت پیمایش روان

در مرحله بعد، کد جاوا اسکریپت را برای فعال کردن پیمایش روان به لینک‌های لنگر اضافه خواهیم کرد. یک فایل جاوا اسکریپت جدید ایجاد کنید و آن را با استفاده از دستور زیر به سند HTML خود پیوند دهید. <script>برچسب. به عنوان مثال:





کد HTML:
  <script src="smooth-scroll.js"></script>
درون فایل جاوا اسکریپت، تابعی تعریف خواهیم کرد که رویدادهای کلیک روی لینک‌های لنگر را دریافت کرده و صفحه را به آرامی به بخش مربوطه اسکرول می‌کند. کد آن به صورت زیر است:


کد HTML:
 document.addEventListener('DOMContentLoaded', function() {
  const anchorLinks = document.querySelectorAll('a[href^="#"]');
  
  for (let link of anchorLinks) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop,
          behavior: 'smooth'
        });
      }
    });
  }
});

این کد جاوا اسکریپت تمام لینک‌های لنگر (anchor links) با a را انتخاب می‌کند. hrefویژگی شروع شده با "#"سپس یک شنونده رویداد کلیک به هر لینک اضافه می‌کند. وقتی روی یک لینک کلیک می‌شود، کد از رفتار پیش‌فرض (یعنی پرش به لنگر) جلوگیری می‌کند و در عوض با استفاده از ... به آرامی صفحه را به بخش مورد نظر اسکرول می‌کند. window.scrollTo()روش.
مرحله ۳: استایل‌دهی به لینک ناوبری فعال

برای بهبود بیشتر تجربه کاربری، می‌توانیم یک نشانگر بصری از بخش فعال در منوی ناوبری اضافه کنیم. می‌توانیم با اضافه کردن یک کلاس CSS به لینک لنگر فعال، به این هدف دست یابیم. در اینجا یک نمونه کد CSS آورده شده است:



کد HTML:
 nav ul li a.active {
  color: #ff0000;
  font-weight: bold;
}

در کد جاوا اسکریپت، می‌توانیم شنونده رویداد کلیک را برای اضافه کردن و حذف کردن موارد زیر تغییر دهیم: activeکلاس از لینک‌های لنگر بر اساس بخش فعال فعلی. در اینجا کد جاوا اسکریپت به‌روز شده آمده است:

کد HTML:
  document.addEventListener('DOMContentLoaded', function() {
  const anchorLinks = document.querySelectorAll('a[href^="#"]');
  
  for (let link of anchorLinks) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop,
          behavior: 'smooth'
        });
        
        // Remove active class from all links
        for (let link of anchorLinks) {
          link.classList.remove('active');
        }
        
        // Add active class to the clicked link
        this.classList.add('active');
      }
    });
  }
});


با این کد به‌روزرسانی‌شده، هر زمان که روی یک لینک کلیک شود، activeکلاس از تمام لینک‌ها حذف شده و به لینک کلیک شده اضافه می‌شود و آن را در منوی ناوبری هایلایت می‌کند.
با دنبال کردن این مراحل ساده، می‌توانید به راحتی اسکرول روان را به سمت لینک‌های خاص در صفحه HTML خود پیاده‌سازی کنید. این کار می‌تواند تجربه کاربری را تا حد زیادی بهبود بخشد و ناوبری را شهودی‌تر و جذاب‌تر کند.