Browser window scrolling/focusing on #section-link in Jekyll static site

Question

I manage my own little blog using Jekyll + Github. I use kramdown as the engine and I would like to take advantage of the {:toc} feature to generate a simple table of content with links. The list of links generates great, but if I click on a link my browser window does not move to that part of the post, but my address bar updates correctly. The end result being I could have the URL to a section at the very bottom of a post, but I would still need to manually scroll all the way to the bottom to read it.

I checked this on some other blog posts on my site by manually entering the full mysite.com/blog/post/#section and experienced the same result (acceptable URL, but not showing/moving to the section). I also checked on 2 mobile devices and another computer - all the same.

I figure that this is something to do with HTML/CSS or possibly I need some type of jQuery plugin. These are my hunches after some fruitless Googling. I think that I am missing some terminology or basic understanding that's preventing me from properly troubleshooting myself.

Can anyone point me in the right direction?

Thank you!

Answer 1

It seems as though your links are working (the fragment changes in the URL), but they are not linking anywhere (nothing happens on URL change).

Consider a link to a footer:

<a href="#my-footer">Go to footer</a>

Clicking this would change your URL to suffix #my-footer, but wouldn't do anything without:

<footer id="my-footer">...</footer>

So I'd say you are missing the id attributes of the things you want to link to. You won't need any JavaScript, including jQuery.

Be sure to use your browser inspect tools or view source to see the id value matches what you are linking to.

More info on fragment links: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page

---

If the id attributes aren't there, double check your _config.yml for your kramdown settings - specifically auto_ids:

kramdown:
  auto_ids: true

Kramdown in Jekyll has auto_ids: true as a default at the time of writing this:

Here's a complete list of supported Kramdown options: https://jekyllrb.com/docs/configuration/markdown/