Menu
Trying to scroll to an anchor link using the following syntax.
<a [routerLink]="['./']" fragment="test">Testing</a> And the anchor node looks like this
<div id="test"> When clicked the browser address bar shows the #test fragment but the automatic scrolling does not occur. Any idea why it does not scroll?
924
If your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement. You can check whether disabling scroll anchoring fixes the issue in Firefox by changing layout.css.scroll-anchoring.enabled to false in about:config.
You can check whether disabling scroll anchoring fixes the issue in Firefox by changing layout.css.scroll-anchoring.enabled to false in about:config. If it does, you can check what node is Firefox using as the anchor using the layout.css.scroll-anchoring.highlight switch.
Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document.
If user clicks inside of the address bar and presses Enter, Firefox then scrolls to the correct position. Problem only occurs when link is not on the same page as the anchored element. If both are on the same page, Firefox scrolls to the correct position. Bug is not present in other browsers.
Based on @vsavkin workaround and taking advantage that fragments are provided as an observable (using "@angular/core": "^2.3.1"):
class MyAppComponent implements OnInit{ constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.fragment.subscribe(f => { const element = document.querySelector("#" + f) if (element) element.scrollIntoView() }) } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
