title: How to (access / go to) a specific part of a page?
body: <p>I need to access a share component that I have included in my home page.
  I have included this before my footer , but at the top, I have a button and when that button is clicked I want to direct the user at this part of the home page.</p>
  
  <pre><code>      &lt;button
          class="popular__button"
          routerLink="/popular-categories"
          id="home__middle-box-button"
          style="cursor: pointer;"&gt;
          Popular categories
        &lt;/button&gt;
  .........
  ......
  &lt;app-listing&gt;
  &lt;/app-listing&gt;
  &lt;app-footer&gt;
  &lt;/app-footer&gt;
  </code></pre>
  
  <p>I tried with the traditional way, but when I try to access this it takes me in a kind of new page and I don't want that.
  Can anyone help me with any trick how to access this part of the page.</p>
  
  <p>the component i want ot access look like this :</p>
  
  <pre><code>&lt;app-browse-grid [categories]="categories$" class="popular"&gt;
    &lt;h2&gt;{{ 'category.popular-categories' | translate }}&lt;/h2&gt;
  &lt;/app-browse-grid&gt;
  &lt;div fxLayout="column wrap" fxLayout.lt-sm="column" fxLayoutGap="32px" fxLayoutAlign="space-evenly center"&gt;
    &lt;div class="button" fxFlex.sm="calc(100%)"&gt;
      &lt;button class="catalog__button"  routerLink="/browse"&gt;
        All categories
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>