Crazy anchor links

Bootstrap Studio Help
1

Hello everybody,

my anchor links do 3 different things:

  1. Sometimes nothing (click has no effect)
  2. Sometimes jump exactly to the wanted position
  3. Sometimes jump to a wrong position

What might be the reason for this behaviour? :dizzy_face:

The html looks like this:

<div class="col">
    <h5>Title</h5>
    <nav>
    <a href="#ankerds">Link1</a>
    <a class="i-footer-link" href="#ankeris">Link2</a></nav>
    <p class="text">© 2023 xy</p>
</div>

The target IDs only exist once. It does not make a difference in which tag I put it (img, div, h, …)

2

Link to website?
Desktop or mobile (or both?)
Which browser(s)?
Computer O.S.?

Do you experience this issue on any other websites with anchor links?
(Try this site for example… https://protectinteriorservices.com/ )

Have you tried creating a new blank website and setting up some anchor links on a page just to see if it’s an issue with the particular website project?

Try opening the New Age website template included in BSS. This site uses anchor links. Preview the site in your browser and see if the links work correctly.

3

The 3 problems are on Win 11 and Chrome Browser.

Mobile (Android, Chrome) the links always “work” but go to the top of the website instead to the wanted position.

Project is not public at the moment.

I will test blank project tomorrow …

4

Going to the “top” is the typical the behavior of an unassigned anchor link. Are you quite sure your syntax is correct on all the components?

5

That’s true. It was a reload problem.But now:

  • works perfect on Android Smartphone, Chrome
  • works perfect on iphone 11, Safari and Chrome
  • Problems are only on win 10 and win 11 (Chrome and Firefox) :face_with_raised_eyebrow:
    Of course I emptied cache and reloaded.
6

Did you try this ^, and if so, did you still have issues? What about the link I gave you to my website?

7

New Age website template and protectinteriorservices.com have exactly the same problems.

:dizzy_face:

For example on this page the anchor (“What are anchor links?”)works:
working anchor

On this website for example the anchor (“Example of creating a jumping anchor link”) has also the same problems:
also not working correctly

All not working examples SCROLL to the target.
The working example JUMPS to the target. :thinking:

8

For me it looks like a global problem on windows systems.
But how to fix it? How to deal with it?

To see the problem on protectinteriorservices.com for example.
• I press “Why sanitize your vehicle” Button
• Scroll back to the top of the site. Repress “Why sanitize …” Button

  1. click: Works
  2. click: works
  3. click: Nothing happens
  4. works
  5. scrolls a few pixels and bounces back to the top
  6. works …“

Of course I did not test only on my own windows computer. I tried on different win 10 and win 11 machines. Chrome and Firefox.