Angular5 - Scrolling to anchor

Question

I am trying to do a scroll to an anchor when I redirect to a new page. I have tried different things but without success. Now it scrolls down but it's not showing the whole HTML element I need, it shows only the header of the element. Here is the redirect to the new page

this.router.navigate(['/controllo/' + result.id], {fragment: 'assegnazioneContatto'});

And here is how I scroll to the element

ngOnInit() {
    this.routeParams.fragment.subscribe(fragment => {
        if(window.document.getElementById(fragment)) {
          this.fragment = fragment; 
          window.document.getElementById(this.fragment).scrollIntoView();
       }
      });
}

Here is the HTML element

<div class="row" [hidden]="!showAssegnazioneContatto()" id="assegnazioneContatto"></div>

What am I doing wrong? I have seen other questions here in stackoverflow but I haven't found any solution.

PS. If I run the code in the console it works fine

malvadao · Accepted Answer · 2021-05-28 10:20:11Z

0

From your question I have understood that the scroll is behaving in a way that it shows most of the preceding elements and the beginning of your new element.

Does this jsFiddle illustrate your situation? https://jsfiddle.net/eqzkpr8a/3/

Try playing around with the scrollIntoView()'s options: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters. Specially the block property, which defines the vertical alignment of the page based on its ancestor element.

In other words, the block property may have four possible values: start, center, end, and nearest. The properties align the page vertically

start: at the start of its ancestor element;
center: at the center of its ancestor element;
end: at the end of its ancestor element;
nearest: towards the start or the end of its ancestor element, based on whatever is nearest to the scrolled element.

answered May 28, 2021 at 10:20

malvadao

3,4821 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user08 Over a year ago

I tried what you suggested but nothing worked

malvadao Over a year ago

could you try instantiating the element as a ViewChild and then performing the .scrollIntoView() on its .nativeElement? i.e. @ViewChild('assegnazioneContatto') assegnazioneDiv(): ElementRef; (...) ngOnInit() { this.assegnazioneDiv.nativeElement.scrollIntoView({block:'start'}); }

DavidG · Accepted Answer · 2021-05-28 13:23:06Z

0

Two options. Have you tried .focus({ preventScroll: false }) or have you tried setting tabindex="1" of the element? Because I had to do that for my own scroll function to have it working properly.

answered May 28, 2021 at 13:23

DavidG

111 silver badge5 bronze badges

3 Comments

user08 Over a year ago

I tried tabindex="1" didn't work. While trying window.document.getElementById(this.fragment).focus({ preventScroll: false }) gives me this error "Expected 0 arguments, but got 1."

DavidG Over a year ago

In my code I don't use window, just document. Not sure why you get an error? The .focus() method can take arguments

user08 Over a year ago

If I run the code in the console works fine also with document. I don't know why is giving me the error

Collectives™ on Stack Overflow

Angular5 - Scrolling to anchor

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related