Links on the page won't "scroll" to the correct anchor

Webdesign Help
1

Hello there!
I’m having rather strange issue here. I have drop-down menu with links that should take you to specific section on other pages.

Screenshot 2022-12-24 at 2.06.05 PM
Screenshot 2022-12-24 at 2.06.05 PM354×552 8.97 KB

This is how the link is done:

<a class="dropdown-item music-item" href="/music.html#zrno">ZRNO | GRAIN collection</a>

And this is how the section on the page is ID:

<section class="portfolio music tatabojs" style="border-bottom-color: var(--bs-dark);">
    <div id="zrno"></div>
    <div class="container">
        <h1>ZRNO | GRAIN</h1>
    </div>
    ...

When I click the links while being on index.html page it will open the music.hml 99% times on the right spot. Also when right click and choose open in new tab - it opens on the right section.

But when I want to use the link to move on the same page to different section. I need to click 2-3 times to get me where I want to go.

It works even worse on any mobile browser.

website url: https://photo.reissmann.design

Anyone got any ideas? I’m starting to think I’m missing something trivial.
Thanks a lot in advance for your help!
Pavel

2

Tested on my Windows desktop running latest versions of Chrome and Firefox. No issues. Links worked as expected.

Also tested on my Android mobile phone (running Android 11) running the latest mobile versions of Chrome and Firefox. No issues. Links worked as expected.

The main issue I have is that the section is scrolling to the top of the body, so much of it is hidden behind the Navbar. You should add a scroll margin to your sections equal in height to the Navbar, and then you should add a script to collapse the Navbar Toggle when you navigate to anchor links on the same page. Here’s one that Kuligposten created that does the job nicely…

<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navcol-1')
const bsCollapse = new bootstrap.Collapse(menuToggle, {
  toggle: false
})
navLinks.forEach((l) => {
    l.addEventListener('click', () => {
        if(bsCollapse._isShown()){
            bsCollapse.hide()
        }
    })
})
</script>
1 Like
3

Thanks a lot for testing and sharing the code to fix the toggle. I’ll definitely add it.
I’m glad the links worked for you as expected though I still have issues :smiley:
It may be the apple :smiley: devices issue only… That would really leave me puzzled.

4

That wouldn’t surprise me at all. Apple phones have had many annoying issues like this over the years.