idiotWu/jQuery-TOC

Refresh and back button bug leads to empty hash/anchor (#)

Closed this issue · 3 comments

This is a great lightweight script. There's a bug involving refreshes (I've only tested this using the vanilla JS version). This is how you reproduce it.

Cllick an anchored link:

http://example.com
http://example.com#anchor

Refresh the page, then click the back button, and instead of properly returning to:

http://example.com

It returns to:

http://example.com#

It's caused by this part of the code:

var currentHash = location.hash;

if (currentHash) {
    // fix hash
    setTimeout(function () {
        location.hash = ''; // This is the problem line
        location.hash = currentHash;
    }, 0);
}

The problem is you're setting location.hash to an empty string, then setting it to currentHash This is what's causing every browser I've used to insert the #

Removing

location.hash = '';

solves the problem.

Another way to reproduce this is when clicking an anchor that leads to another URL:

http://example.com/page-1
http://example.com/page-9#something

Clicking the back button returns to:

http://example.com/page-1#

Thanks.

Thanks for reporting! I almost forgot this script😂

It was a hack to force browsers scroll to anchor after reloading page, since TOC ids are initialized after page is rendered.

I'll fix it soon. Hope the gulp scripts could still work after two years 🤣

0.0.6 is out

Thanks @idiotWu it's working great now.