How to (access / go to) a specific part of a page?

Question

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.

      <button
        class="popular__button"
        routerLink="/popular-categories"
        id="home__middle-box-button"
        style="cursor: pointer;">
        Popular categories
      </button>
.........
......
<app-listing>
</app-listing>
<app-footer>
</app-footer>

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.

the component i want ot access look like this :

<app-browse-grid [categories]="categories$" class="popular">
  <h2>{{ 'category.popular-categories' | translate }}</h2>
</app-browse-grid>
<div fxLayout="column wrap" fxLayout.lt-sm="column" fxLayoutGap="32px" fxLayoutAlign="space-evenly center">
  <div class="button" fxFlex.sm="calc(100%)">
    <button class="catalog__button"  routerLink="/browse">
      All categories
    </button>
  </div>
</div>

I recommend use this library https://www.npmjs.com/package/ngx-page-scroll — Rafael Lucini, Jun 12 '19 at 11:53
You should first just do a normal scroll as suggested by chestas. ngx-page-scroll is for fancy scrolling and you may not need/want it — Ruan Mendes, Jun 12 '19 at 12:01

chestas · Accepted Answer · 2019-06-12T12:31:39.327

2

you can use fragment with routerLink. routerLink doc

    <button
        routerLink="/popular-categories"
        fragment="ELEMENT_ID_TO_NAVIGATE"
    >
      Popular categories
      </button>


<div id="ELEMENT_ID_TO_NAVIGATE">this is the element i want to navigate<div>

edit: to make it work need to enable anchor scrolling in router module config

RouterModule.forRoot(routes, {anchorScrolling: 'enabled'})

edited Jun 12 '19 at 12:31

answered Jun 12 '19 at 11:55

chestas

124
1
6

thanks, I will try it out! , please can you clarified me abut fragment, what is usually the id – Ilia Tapia Jun 12 '19 at 12:04
1

id - attribute of the element https://www.w3schools.com/html/html_id.asp edit: added code to answer – chestas Jun 12 '19 at 12:06
the same no, it takes me there but not at the end of the page where this is located but, at the page – Ilia Tapia Jun 12 '19 at 12:15
1

looks like need to enable acnhor scrolling in routerModule config. look at this questions - https://stackoverflow.com/questions/39941656/scroll-to-anchor-not-working – chestas Jun 12 '19 at 12:29
this had some problem i try some of there solutions there but none of them work , is there anywany just to go to botton when i click the button – Ilia Tapia Jun 12 '19 at 12:50
1

https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page just `window.scrollTo(0,document.body.scrollHeight);` inside your function which you call when you click the button – chestas Jun 12 '19 at 12:56
i tried this one too and worked, thank you – Ilia Tapia Jun 12 '19 at 13:02

score 1 · Answer 2 · answered Jun 12 '19 at 12:05

1

Another approach would be to add (click)="yourFunction()"and the function could look like

yourFunction(){
    this.router.navigateByUrl('/popular-categories');
}

you need to inilialize it in the constructor like this constructor(private router: Router) and be sure that you import the router like this:

import { Router } from '@angular/router';

answered Jun 12 '19 at 12:05

P.Dederer

62
3

no, it takes me there but not at the end of the page where this is located but, at the page, what I archive is the same as routerLink="/popular-categories" – Ilia Tapia Jun 12 '19 at 12:15

How to (access / go to) a specific part of a page?

2 Answers2