Mkdocs-material: Issue with custom anchor links (page jumps)

[Mehran-Baghi]

Description

In order to add citation to my document I need to link the sentences to a footnote section (References). I tried to embed the html anchor tag in my markdown like this, However:

Expected behavior

I expect when I click the link:

It jumps exactly to the anchor point, like this in the default theme:

Actual behavior

However in material theme it lands a few line blew:

Steps to reproduce the bug

here is my index.md file used to produce above pictures:
index.txt
Define anchor point: <a id="cite_note-1"></a>
Link to anchor: [[1]](#cite_note-1)

Package versions

• Python: Python 2.7.9
• MkDocs: mkdocs, version 0.16.1
• Material: Version: 0.2.4

System information

• OS: Debian Gnu/Linux
• Browser: Not relevant

[squidfunk]

Should be fixed in bfca02762d325324191beb8325e77360f5679cd6, please check and confirm.

[Mehran-Baghi]

Yes, now it works like a charm! :sparkles: :ok_hand:

[Mehran-Baghi]

Hi
I have this bug again with Footnotes extension.

[rianquinn]

I am still having this issue. If I add a custom anchor, when I click on the anchor, it scrolls just past the anchor. It appears as if it's scrolling to the correct location but not taking the height of the top header into account, so the header is covering up the anchor.

Any thoughts?

[squidfunk]

Custom anchors are currently not supported, as this could break stuff in unpredictable ways.

[rianquinn]

That's fine. Is there a way to only show the TOC on the sidebar for headers 1 and 2. Basically, if I use the anchors that the TOC generates, they work great. The problem is, for me to get anchors for header 3, I need to tell the TOC that I want 1-3, but that causes the sidebar to have 1-3 which is a mess. What I want is for all of the headers to have anchors, but the sidebar only show 1-2.

[squidfunk]

Please us the search on this and MkDocs's issue tracker. This was discussed in detail plenty of times.

[blakadder]

Is there some sort of workaround to scroll up a bit when using custom anchors?

[squidfunk]

You could use the styles that are used for the headlines and target all [id] elements.

https://github.com/squidfunk/mkdocs-material/blob/728fef6ec8259e910500885047911c18bae145da/src/assets/stylesheets/extensions/_permalinks.scss#L78-L81

[blakadder]

Here's a possible solution:

In the end I assigned class="cmnd" to each anchor I wanted this behaviour on and added to extra_css:

.cmnd:target {
    display: block;
    height: 4rem; /*approx same height as header*/
    margin-top: -4rem; /*approx same height as header*/
    visibility: hidden;
}

this will avoid unwanted effects if using globally

[squidfunk]

Jep, the side effects are the reason why this is not globally applied. Thanks for sharing your solution.