AnchorScrolling is applied when fragment does not match any anchor

Which @angular/* package(s) are the source of the bug?

router, Don’t known / other

Is this a regression?

No

Description

When anchorScrolling and scrollingPositionRestoration are enabled in router options, accessing a route with fragment that does not contain any element with a matching id or name seems to cause the page to still scroll, even if there’s no apparent target for the scroll.

Despite this effect, from what I’ve tested, scrollToAnchor does not seem to be the issue since it does not find any element to scroll to.

Steps to reproduce:

1. Click on ‘Crisis Center’. Route loaded is /crisis-list
2. Scroll down to bottom of page. Click link
3. Route loaded is /heroes-list#123. Page is scrolled even though no elements have id or name 123.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ervdaf?file=src/app/heroes-list/heroes-list.component.html

Please provide the exception or error you saw

Please provide the environment you discovered this bug in

Angular CLI: 10.1.7
Node: 12.14.1
OS: darwin x64

Angular: 12.1.1
... animations, common, compiler, core, forms
... platform-browser, platform-browser-dynamic, router


Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.7 (cli-only)
@angular-devkit/core         10.1.7 (cli-only)
@angular-devkit/schematics   10.1.7 (cli-only)
@schematics/angular          10.1.7 (cli-only)
@schematics/update           0.1001.7 (cli-only)

Anything else?

No response

[atscott]

@miacrd - If you don’t use the shadow dom, you can just use a one liner to determine if the anchor exists https://github.com/angular/angular/blob/8d0511d009aa01fbebdb61ca4a97dd48d5d1929d/packages/common/src/viewport_scroller.ts#L216 You can just copy any/all of the code in there

[atscott]

https://github.com/angular/angular/pull/43347#issuecomment-914549142.

After more thought, I don’t think this is something we should change in the scrolling implementation. Due to how the child routes and router outlets work, it really may be desirable for an application to not scroll to top if the fragment doesn’t exist. In particular, we certainly shouldn’t scroll if the fragment is the only thing that updated. In addition, because there might be outlets and child outlets, applications very well might only be changing a small section of the page so we wouldn’t even want to always scroll to the top on a path change.

I think this should be something that’s addressed in application code instead by subscribing to Router events, filtering on NavigationEnd or Scroll, and determining how exactly the scrolling should be handled at that point.

I also wouldn’t think that writing in more complex handling for missing fragments would be something we’d want to bake into the common scroller, as it would increase bundle size for everyone that uses it but wouldn’t be something most applications are concerned about.