Page scrolls past table of contents header anchor points

[rbraddev]

When a link is clicked in the table of contents, the page scrolls to just past the start of the first paragraph rather than to the start of the header.

[styxlab]

Thanks for noting. Don't know why the root margin displacement defined in useActiveHash is not working. Will need to analyze further.

[styxlab]

The correct header displacement should be handled by the toc.css style file. I have no clue why it is not coming through correctly. I added the help wanted label to this issue, so maybe someone else is quicker in finding out the root cause.

[seoxyz]

izinkan saya menjawab.. 🙏 @styxlab
toc.css "display block" doesn't work in flex area. the solution is to add comment tag or remove "html.casper .post-content" part in screen.css

[styxlab]

@seoxyz Thanks for finding out the root cause of this issue ❤️ I'll add you to the contributors list right away and will think about how to best fix it later this week.

[styxlab]

@all-contributors please add @seoxyz for code

[allcontributors]

@styxlab

I've put up a pull request to add @seoxyz! 🎉

[seoxyz]

Thanks @styxlab 🙏

[styxlab]

The problem is not easily fixed, it turns out to be a side effect of #31. The situation is as follows: Reverting the change of #31 would solve this issue here, but the wide image alignment issue would re-appear. One more note. screen.css should be left untouched as styles can be overwritten in toc.css. Any ideas welcome.

[Garfounkel]

One way to do it might be to modify the htmlAst during the generation of the toc to add a simple div with the right id in front of each header elements:

<h2 id="my-header">My header</h2>

becomes:

<div id="my-header" style="position: relative; top: -80px;"></div>
<h2 id="my-header">My header</h2>

Works on my browser. However I'm not sure how to modify the htmlAst in place or even if it's a good idea. I'll happily give a try at a PR for this if someone can point me in the right direction. Edit: I found another solution using a script to modify the HTML page after it loaded, see #115 (comment) for the PR.

[Garfounkel]

On a side note, you can bypass the issue from the Ghost editor by adding the div code in a html embed.
Let's say your header is called "My Header", you can add the following in a html embed right before your header:

<div id="my-header" style="position: relative; top: -80px;"></div>

However, it requires modifying the content of all your posts/pages. Not ideal.

[Garfounkel]

Here's a PR #150 to fix this. It patches the html after the page loaded to add divs with the correct id right before each header.

[styxlab]

Thanks @Garfounkel! I will have a look at your suggestions and PRs later this week. (@all-contributors please add @Garfounkel for code).

[allcontributors]

@styxlab

I've put up a pull request to add @Garfounkel! 🎉