Scroll to anchor in router.scrollBehavior doesn't work

[kidonng]

• I confirm that this is an issue rather than a question.

Bug report

saber/packages/saber/vue-renderer/app/router.js

Lines 68 to 87 in 61992cb

	if (to.hash) {
	let hash = to.hash
	// CSS.escape() is not supported with IE and Edge.
	if (
	typeof window.CSS !== 'undefined' &&
	typeof window.CSS.escape !== 'undefined'
	) {
	hash = '#' + window.CSS.escape(hash.substr(1))
	}
	try {
	if (document.querySelector(hash)) {
	// scroll to anchor by returning the selector
	position = { selector: hash }
	}
	} catch (e) {
	console.warn(
	'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).'
	)
	}
	}

The code attempts to scroll to the anchor if to.hash exists and the anchor can be found. But the scroll never happens.

Version

0.6.4

Steps to reproduce

about.md:

[Hello](./hello.md#world)

hello.md:

# World

Lorem ipsum...

Then click the link in about.md.

What is expected?

Page scrolled to the title World.

What is actually happening?

Page scrolled to the top (default behavior).

Other relevant information

1. If to.hash only contains ASCII characters, the hash before and after escaping are the same. If it contains non-ASCII characters (e.g. CJK characters), escaping the hash will produce a selector matching nothing (assuming header's id is generated in standard behavior).

Possible solution: Use decodeURIComponent(to.hash) instead of window.CSS.escape(to.hash)

2. Even if the selector is valid, document.querySelector(hash) still matches nothing, thus the scroll won't trigger. Chances are page is not loaded at that time.

Possible solution: Move the codition statement to a hook like afterPageLoad or use other methods (can only come up with setTimeout(condition, 0))

• Result of running saber -v: cli.js/0.6.4 win32-x64 node-v12.3.1
• Browser version (optional): Google Chrome 76.0.3800.0 (64-bit)
• Is Saber a global or local install? Local
• Which package manager did you use for the install? Yarn
• Does this issue occur when all plugins are disabled? Yes

IssueHunt Summary

krmax44 has been rewarded.

Sponsors (Total: $50.00)

• issuehunt ($50.00)

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[IssueHuntBot]

@IssueHunt has funded $50.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[IssueHuntBot]

@egoist has rewarded $35.00 to @krmax44. See it on IssueHunt

• 💰 Total deposit: $50.00
• 🎉 Repository reward(20%): $10.00
• 🔧 Service fee(10%): $5.00

[kidonng]

Scrolling to id containing URI encoded characters still has issue 😢

First two triggered by clicking the heading anchor (not encoded and working), second two using browser back/forward (encoded and not working).

We should put a const hash = decodeURIComponent(to.hash) here:

saber/packages/saber/vue-renderer/app/router.js

Lines 64 to 67 in 6118d78

	if (to.hash) {
	if (document.getElementById(to.hash.substr(1))) {
	// scroll to anchor by returning the selector
	position = { selector: to.hash }

[egoist]

@kidonng fixed in 0.6.7