Problem/Motivation

Avoid scroll before page load.

Steps to reproduce

  1. Create 2 pages containing the same HTML ID
  2. Link the anchor from 1 page to the other (with an A tag with hashtag)
  3. 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

PieterDC created an issue. See original summary.

rembrandx’s picture

Status: Needs review » Closed (duplicate)

Closing this ticket here and moving it to the Theme generator: https://www.drupal.org/project/rocketship_theme_generator/issues/3224494