Problem/Motivation
Avoid scroll before page load.
Steps to reproduce
- Create 2 pages containing the same HTML ID
- Link the anchor from 1 page to the other (with an A tag with hashtag)
- Click that link and notice you scroll to the anchor on the same page before the new page loads and you scroll to the anchor on that page
Proposed resolution
Adjust scroll behaviour JavaScript binding condition.
Remaining tasks
Incorporate this code change.
In components/00-theme/00-base/06-scripts/01-base.js
remove
// the url, minus stuff after hash or parameters
var currentUrl = window.location.href.split(/[?#]/)[0];
// the path, minus stuff after hash or parameters
var pathBase = path.split(/[?#]/)[0];
// if path points to current page, prevent reload.
// meaning, if the url's (stripped of hashes and parameters) match up,
// we're on the same page and don't need a page reload
// if (currentUrl.indexOf(pathBase) !== -1) {
if (currentUrl.replace(/\/$/, "") == pathBase.replace(/\/$/, "")) {
e.preventDefault();
}
but add
// the url, minus stuff after hash or parameters
var currentUrl = window.location.href.split(/[?#]/)[0];
// the path, minus stuff after hash or parameters
var pathBase = path.split(/[?#]/)[0];
// if the URLs (stripped of hashes and parameters) don't match up, it's
// a link to a different page.
// don't scroll to anchor on same page on click.
if (currentUrl.replace(/\/$/, "") !== pathBase.replace(/\/$/, "")) {
return true;
}
// we're on the same page and don't need a page reload
e.preventDefault();
to the top of
$('a[href*="#"]').not('a[href="#"]').once('js-once-scrollable-anchors').each(function() {
which does a bit more than the original code.
User interface changes
No more scroll before page load.
API changes
None.
Data model changes
None, AFAIK.
Comments
Comment #4
rembrandx commentedUpdated in v3.2.2 & v2.2.8