My website's main page is divided into different sections:
- Introduction
- Services
- Projects
All the content is on the same page. To navigate to a specific section, I use Angular2 fragments in my navigation structure. Here's the HTML snippet for navigation:
.container {
border: solid 1px red;
height: 130vh;
}<header>
<ul class="menu-bar primary large-condense large-align-center medium-expand large-text-center">
<li>
<a routerLink="/home" href="#homePageTop">Home</a>
</li>
<li>
<a routerLink="/home" fragment="services" href="#serviceContainer">Services</a>
</li>
<li>
<a routerLink="/home" fragment="projects" href="#projectContainer">Projects</a>
</li>
</ul>
</header>
<section id="homePageTop" class="home-desktop-container container">
INTRODUCTION HERE...
</section>
<section id="serviceContainer" class="serviceContainer container">
SERVICES HERE...
</section>
<section id="projectContainer" class="projectContainer container">
PROJECTS HERE...
</section>In Google Chrome and Microsoft Edge, clicking on the services and projects links correctly scrolls me to the intended section of the home page. However, this functionality does not work in Firefox. Even though the URL changes to include the fragment (http://localhost:4200/home#projects), I am not taken to the specified section. Instead, the page just reloads and I'm back at the top.
Why does it work in Chrome and Edge but fail in Firefox? There are no error messages displayed in the console either.
Thank you for your assistance.