Confluence : issue with Anchor links hidden by breadcrumb navigation bar

[Adrien]

Hello, I’m running Confluence server 7.0.1 and I noticed an issue with Anchor links.

When clicking on a link pointing to an anchor (on the same page or on another page), the first lines where the anchor was set are hidden behind the breadcrumb navigation bar.

So we have the impression that the anchor link does not point to the exact position where it was set, but to the second or third line below.

This is often confusing when pointing to titles or sections, because we don’t know where we were pointed to because we cannot read the title.

However when scrolling once down and up again, the breadcrumb navigation bar disapears and we can finally see the lines that were hidden before.

And they correspond to the place / title where the anchor was set, so we know the link works properly.

Is there any tips on how to solve this ?

Thank you in advance.

Example when clicking on a link to an anchor (Title where anchor is set is not visible) :

When scrolling once up then once down, breadcrumb navigation bar disapears and title can be seen :

Also, if the link and anchor are on the same page I noticed this issue only occurs when the anchor is located somewhere above the link (which is most of the time in my case).

If anchor is located somewhere below the link, the breadcrumb navigation bar dissapears by default so all the text is correctly visible.

The issue is even more annoying when pointing from another page to the anchor. In that case, it seems the global menu bar hidding the Title where the anchor was set : 

[Adrien]

[EDIT] added more description in content of ticket instead of this answer

[Juergen TIEDEMANN]

I have the same problem and would appreciate a quick fix.

[Hayden]

Sigh, exactly this, what is this, it is sooooooo frustrating that something like this doesn't work as intended.

But yeah, any fixes incoming on this?

[David Ball]

@Adrien , I'd like to follow this. Please could you post a link to the ticket.

[b_mort]

Just came across this very issue and a quick search brought me here- would love a quick fix or work around to this as well! 

[Sanjay Sharma]

+ 1 vote. Very frustrating.

A very hacky workaround is to put a line break for every header (or anchor title) in your page. That way it does work as the anchor goes to the empty line which is hidden by the page header and then you can see the anchor title just below it.

As I said very hacky but works. I can't believe this is not bothering Atlassian :)

[antoine.weekers]

This is indeed a frustrating issue. the work-around is quite obvious, but also disappointing. Especially when linking to items in a table. I now need to point to the row above; which obviously gives issues when deleting or adding rows.

A quick fix would be highly appreciated indeed.

[Roger]

If you have admin rights then you can add your own styling to fix this issue:
https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html

If you do not have these rights or your admin wont't fix it, then you you can use a browser extension to edit the styling of the site just for yourself.

I used Tampermonkey to add some extra whitespace to the page, using the CSS scroll-margin-top property.

A value of 18rem worked for me.

Make sure you add your own domain to the @[deleted] property or this code will not run on your instance of Confluence.

There are other browser extensions that allow you to add custom CSS to a webpage without using all this JavaScript. In that case just add the scroll-margin-top property to the body element.

// ==UserScript==
// @name Make hidden page achors visible below page header
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://YOUR_NAME.atlassian.net/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @run-at document-start
// @grant none
// ==/UserScript==

(function() {
'use strict';

const css = `
body {
scroll-margin-top: 18rem;
}
`;

var element = document.createElement('style');
element.setAttribute('type', 'text/css');

if ('textContent' in element) {
element.textContent = css;
} else {
element.styleSheet.cssText = css;
}

document.getElementsByTagName('head')[0].appendChild(element);

})();