Anchor links in TOC don't change URL hash

[sdruskat]

• This is a question about using the theme.
• This is a feature request.
• I believe this to be a bug with the theme.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: (4.6.0, 4.5.2)
• Jekyll version: 3.6.0
• GitHub Pages hosted: yes
• Operating system: Ubuntu 16.04

---

Expected behavior

When I click an anchor link in the TOC generated with {% include toc %}, the active URL will change to site/page/#anchor.

This, so that when the page is reloaded, the content from the anchor is in focus.

Steps to reproduce the behavior

• On https://mmistakes.github.io/minimal-mistakes/docs/layouts/, hover over any link in the TOC ("Included layouts"), target hover displays expected URL site/page/#anchor.
• Click the link, page scrolls to anchor
• URL is still site/page/(i.e., https://mmistakes.github.io/minimal-mistakes/docs/layouts/), not site/page/#anchor.

I assume that this is defined somewhere in the JavaScript, but as I'm not sure which technique is used I see myself unable to find the part where the location hash is removed. Also I'm not sure whether this is part of the theme or happens somewhere else?

[sdruskat]

Ah, found it, at around line 3944:

var n = function(e) {
    return e.replace(/(:|\.|\/)/g, "\\$1")
},

If you remove the regex return, the hashes are displayed in the URL.

[mmistakes]

If I had to guess that regex is part of the Smooth Scroll jQuery plugin. There's probably a reason for it and appears there are ways to enable the hashes so they appear in history and are focusable.

https://github.com/kswedberg/jquery-smooth-scroll

[sdruskat]

Thanks. I put the regex back in and included @kswedberg's script and it works like a spell.

[vortexing]

I'm attempting to use this theme as a remote theme and thus not sure how to address this issue in that context. Any guidance?

[mmistakes]

@vortexing You'll need to override the theme's /assets/js/main.min.js file by copying it into the same location in your repo. Then make the JavaScript changes above.

It would probably be a smart idea to copy the entire /assets/js folder of files to your repo, make changes in the specific JS file and then use npm run build:js to generate the minified main.min.js file.

Consult the JavaScript docs for more info on that process. https://mmistakes.github.io/minimal-mistakes/docs/javascript/

[edemaine]

@mmistakes Is there a particular reason that jquery-smooth-scroll isn't included in this theme by default? It's pretty unexpected behavior that clicking on a TOC link doesn't add the hash fragment to the URL. Personally, I'd like the hash fragment to also update while scrolling (as on e.g. https://coffeescript.org/), though I can understand that's a more stylistic choice.

[mmistakes]

@edemaine Not sure I follow. jQuery Smooth Scroll is included in the theme. Its an out of the box install, which doesn't enable the hashes for whatever reason.

You can check out #1767 which tried to address that, but it had its limitations and breaks other things which is why it hasn't been merged.

[kswedberg]

Not sure what other things the solution at #1767 breaks, but I'd be happy to take a look at something and/or change the smooth-scroll plugin if a fix is needed there

[mmistakes]

@kswedberg See #1786 for the outstanding issues. If you have a fix feel free to submit a PR and I’ll review.