Navigate to different parts or position in a Lightning Web Component Salesforce

In this blog I will show you how you may navigate to different parts or positions in a Lightning Web Component or in any other HTML component.

This is just a very basic HTML trick which will work with any component that supports HTML.

In HTML using anchor tag you can scroll your browser position to a specific area. For example if you are having a long html component which is containing a lot of text and other data. The only option user will get by default is to scroll to the required specific area.

But using anchor tag you may give user ability to scroll to a specific position using a click. For that you have to use your element Id in the anchor tag href attribute.

Please check below example-

HTML

<template>
  <div class="slds-box slds-theme_default">
    <lightning-layout multiple-rows>
      <lightning-layout-item padding="around-small" size="4">
        <div class="slds-is-fixed">
          <nav class="slds-nav-vertical" aria-label="Sub page">
            <div class="slds-nav-vertical__section">
              <h2 id="entity-header" class="slds-nav-vertical__title">
                Navigation Example
              </h2>
              <ul aria-describedby="entity-header">
                <li class="slds-nav-vertical__item slds-is-active">
                  <a
                    href="#c1"
                    class="slds-nav-vertical__action"
                    aria-current="true"
                    >Parent to Child</a
                  >
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#c2" class="slds-nav-vertical__action">Templates</a>
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#c3" class="slds-nav-vertical__action">Fetch APIs</a>
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action"
                    >Public Reports</a
                  >
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action">All Reports</a>
                </li>
              </ul>
            </div>
            <div class="slds-nav-vertical__section">
              <h2 id="folder-header" class="slds-nav-vertical__title">
                Folders
              </h2>
              <ul aria-describedby="folder-header">
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action"
                    >Created by Me</a
                  >
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action"
                    >Shared with Me</a
                  >
                </li>
                <li class="slds-nav-vertical__item">
                  <a href="#" class="slds-nav-vertical__action">All Reports</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </lightning-layout-item>
      <lightning-layout-item padding="around-small" size="8">
        <div id="c1"><c-zgrand-parent></c-zgrand-parent></div>
        <div id="c2" class="slds-p-top_xx-large">
          <br /><br /><br /><br /><br />
          <div class="slds-p-top_xx-large">
            <c-templates></c-templates>
          </div>
        </div>
        <div id="c3">
          <br /><br /><br /><br /><br />
          <div class="slds-p-top_xx-large">
            <c-get-random-cat-fetch></c-get-random-cat-fetch>
          </div>
        </div>
      </lightning-layout-item>
    </lightning-layout>
  </div>
</template>