Direct link to sub-item not scrolling to correct position #351

adrianbj · 2018-01-17T02:47:21Z

I am sure I must have some setting incorrect, but the first time I load this:
https://adrianbj.github.io/TracyDebugger/#/debug-bar?id=module-disabler

it has the "module-disabler" section at the bottom of the page. I browser reload brings it to the top as expected.

However I don't see the problem with the docs page for docsify, eg: https://docsify.js.org/#/configuration?id=load-navbar works as expected on the first load.

Am I doing something incorrectly?

Thanks, and I hope this is the best place to ask for help.

QingWei-Li · 2018-01-17T03:25:17Z

Because there is a picture on your page, the picture height is unknown at first load.

adrianbj · 2018-01-17T14:04:31Z

Any chance you could move the scroll feature code to be triggered after all images have been loaded?

adrianbj · 2018-12-19T05:49:04Z

Hi @QingWei-Li - any chance I can get this back on your radar please?

Closes: #351

cheng-kang · 2018-12-23T18:02:25Z

@adrianbj just raised a PR for this issue: #723

Would be great if you could help testing it 😄

IssueHuntBot · 2018-12-27T10:37:12Z

@issuehuntfest has funded $40.00 to this issue. See it on IssueHunt

rizdaprasetya · 2019-09-05T11:21:57Z

Took quite a while to wait proposed PR to be merged, I end up creating a plugin to overcome this issue
Just include this script tag like the other default Docsify plugins (search, emoji, etc). Put it after Docsify script tag.

<script src="https://cdn.jsdelivr.net/gh/rizdaprasetya/docsify-fix-pageload-scroll@master/index.js"></script>

or add this on your $docsify.plugins declaration:

function (hook, vm) {
    hook.ready(function () {
        // true = show debug log
        let dd = false 
        let TARGET_QUERY = 'id'
        let SCROLL_DELAY = 2000 // in milisecond
        let location = window.location

        dd&&console.log('custom scroll plugin called!')
        let currentUrlWithoutHash = new URL(
            location.origin+location.pathname+
            location.search+location.hash.substring(1)
        )
        let urlQueryParam = currentUrlWithoutHash.searchParams
        let isUrlHasIdQuery = urlQueryParam.has(TARGET_QUERY)
        if(isUrlHasIdQuery){
            dd&&console.log('url has id, will scroll to element')
            let urlId = urlQueryParam.get(TARGET_QUERY)
            // run delayed, to make sure everything loaded
            setTimeout(function() {
                dd&&console.log('will scroll now!')
                try{
                    document.querySelector('#'+urlId)
                        .scrollIntoView()
                } catch(e){ dd&&console.log('custom scroll failed',e) }
            }, SCROLL_DELAY);
        }
    })
},

Incase anyone interested.
Ugly maybe, but it simply works for me ¯_(ツ)_/¯

Chimildic · 2020-12-18T12:26:18Z

Works for me

// index.html
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="./script/docsify-fix-pageload-scroll.js"></script>

// docsify-fix-pageload-scroll.js
(function () {
    function create() {
        return (hook) => {
            const TARGET_QUERY = 'id';
            const SCROLL_DELAY = 500;

            hook.doneEach(function () {
                if (!location.hash.includes('?')) return;
                let searchParams = new URLSearchParams(location.hash.split('?')[1]);
                let header = document.querySelector('#' + searchParams.get(TARGET_QUERY));
                header && setTimeout(() => header.scrollIntoView(), SCROLL_DELAY);
            });
        };
    }

    if (typeof $docsify === 'object') {
        $docsify.plugins = [].concat(create(), $docsify.plugins);
    }
})();

iammerrick · 2021-08-03T21:16:39Z

I solved this problem a bit differently, instead of waiting for a certain amount of time, I instead check the top offset of the targeted element. Once the top offset value is "settled" I scroll it into view. All of this feels hacky as can be to me but alas! :-D

(function (win) {
  function create() {
    const urlId = new URLSearchParams(win.location.search).get("id");
    if (!urlId) return null;

    return function (hook, vm) {
      const threshold = 20;
      let identical = 0;
      let lastCheck = 0;

      hook.ready(function () {
        const element = win.document.getElementById(urlId);
        (function poll() {
          var elDistanceToTop =
            window.pageYOffset + element.getBoundingClientRect().top;

          if (lastCheck === elDistanceToTop) {
            identical++;
          }

          lastCheck = elDistanceToTop;

          if (identical > threshold) {
            element.scrollIntoView();
          } else {
            setTimeout(poll, 10);
          }
        })();
      });
    };
  }

  win.ScrollAfterImageLoad = {};
  win.ScrollAfterImageLoad.create = create;

  if (typeof win.$docsify === "object") {
    win.$docsify.plugins = [].concat(create(), $docsify.plugins);
  }
})(window);

- this solved the problem docsifyjs/docsify#351 (comment)

zhangtian512 · 2024-01-09T08:40:24Z

Took quite a while to wait proposed PR to be merged, I end up creating a plugin to overcome this issue Just include this script tag like the other default Docsify plugins (search, emoji, etc). Put it after Docsify script tag.

<script  src="https://cdn.jsdelivr.net/gh/rizdaprasetya/docsify-fix-pageload-scroll@master/index.js"></script>

or add this on your $docsify.plugins declaration:

function (hook, vm) {
    hook.ready(function () {
        // true = show debug log
        let dd = false 
        let TARGET_QUERY = 'id'
        let SCROLL_DELAY = 2000 // in milisecond
        let location = window.location

        dd&&console.log('custom scroll plugin called!')
        let currentUrlWithoutHash = new URL(
            location.origin+location.pathname+
            location.search+location.hash.substring(1)
        )
        let urlQueryParam = currentUrlWithoutHash.searchParams
        let isUrlHasIdQuery = urlQueryParam.has(TARGET_QUERY)
        if(isUrlHasIdQuery){
            dd&&console.log('url has id, will scroll to element')
            let urlId = urlQueryParam.get(TARGET_QUERY)
            // run delayed, to make sure everything loaded
            setTimeout(function() {
                dd&&console.log('will scroll now!')
                try{
                    document.querySelector('#'+urlId)
                        .scrollIntoView()
                } catch(e){ dd&&console.log('custom scroll failed',e) }
            }, SCROLL_DELAY);
        }
    })
},

Incase anyone interested. Ugly maybe, but it simply works for me ¯_(ツ)_/¯

worked for me. thanks

stdword · 2024-07-06T23:23:57Z

Hello! In 2024 this issue still exists for plugins. I've faced this one in docsify-tabs. And agree with @jhildenbiddle — it should be handled by docsify with something like:

hook.beforeScrollToAnchor(function (path, anchor) {
    // detect the height of the content and calculate the correct position for scrolling
});

Here is my solution for docsify-tabs. And I combined it with my version of scroll-finisher:

function fixTabs() {
  const uriComponent = window.location.hash || window.location.search;
  const anchorID = (uriComponent.match(/(?:id=)([^&]+)/) || [])[1]
  if (!anchorID)
    return

  const anchorElement = document.querySelector('#' + decodeURIComponent(anchorID));

  function adjust(treshold = 3, interval = 20, pixelDelta = 4) {
    if (adjust.state !== null) {
      if (window.pageYOffset == adjust.state) {
        adjust.settledCount++
        if (adjust.settledCount > treshold) {
          if (Math.abs(window.pageYOffset - anchorElement.offsetTop) > pixelDelta)
            window.scrollTo({top: anchorElement.offsetTop, behavior: 'smooth'});
          else return
        }
      }
    }

    if (adjust.state === null || adjust.settledCount <= treshold)
      setTimeout(adjust, interval)
    adjust.state = window.pageYOffset
  }
  adjust.settledCount = 0
  adjust.state = null

  if (anchorElement)
    adjust()
}

function docsifyTabsFix(hook, vm) {
  hook.doneEach(function () {
    const hasTabs = document.querySelector(`.docsify-tabs__tab`);
    if (hasTabs)
      fixTabs()
  });
}

window.$docsify = window.$docsify || {};
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], docsifyTabsFix);

QingWei-Li added the enhancement label Jan 17, 2018

QingWei-Li added this to the 4.7.0 milestone Feb 10, 2018

QingWei-Li removed this from the 4.7.0 milestone Jun 29, 2018

cheng-kang pushed a commit that referenced this issue Dec 23, 2018

fix: scrollToView not working properly if images exist

3d0bfd6

Closes: #351

cheng-kang mentioned this issue Dec 23, 2018

fix: scrollToView not working properly if images exist #723

Closed

3 tasks

rizdaprasetya mentioned this issue Sep 5, 2019

Inconsistent ID Anchor Jumps (revisited) #559

Closed

jhildenbiddle mentioned this issue Jan 30, 2020

Direct links to subsections with id don't work jhildenbiddle/docsify-tabs#8

Closed

ksugar added a commit to elephant-track/elephant-track.github.io that referenced this issue Mar 29, 2022

Fix a problem in scrolling with anchor link

a286257

- this solved the problem docsifyjs/docsify#351 (comment)

anders-kiaer mentioned this issue Oct 5, 2022

Scroll position in docs does not work perfectly equinor/webviz-config#640

Open

visortelle mentioned this issue Feb 27, 2023

[Doc] Broken links at /admin-api-clusters apache/pulsar#19604

Closed

6 tasks

Franisz mentioned this issue Apr 29, 2023

fix-pageload-scroll met0rii/loa-pl-wiki#3

Merged

This was referenced Sep 24, 2023

Fix auto-scroll undershooting correction location on initial page load #2237

Closed

Fix auto-scroll undershooting correction location on initial page load #2238

Closed

slym mentioned this issue Jan 8, 2024

can't jump to right anchor when there are lots of pictures in doc #1753

Open

1 task

jhildenbiddle added this to the 5.x milestone Jul 6, 2024

jhildenbiddle self-assigned this Jul 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Direct link to sub-item not scrolling to correct position #351

Direct link to sub-item not scrolling to correct position #351

adrianbj commented Jan 17, 2018

QingWei-Li commented Jan 17, 2018

adrianbj commented Jan 17, 2018

adrianbj commented Dec 19, 2018

cheng-kang commented Dec 23, 2018

IssueHuntBot commented Dec 27, 2018

rizdaprasetya commented Sep 5, 2019 •

edited

Loading

Chimildic commented Dec 18, 2020 •

edited

Loading

iammerrick commented Aug 3, 2021 •

edited

Loading

zhangtian512 commented Jan 9, 2024

stdword commented Jul 6, 2024 •

edited

Loading

Direct link to sub-item not scrolling to correct position #351

Direct link to sub-item not scrolling to correct position #351

Comments

adrianbj commented Jan 17, 2018

QingWei-Li commented Jan 17, 2018

adrianbj commented Jan 17, 2018

adrianbj commented Dec 19, 2018

cheng-kang commented Dec 23, 2018

IssueHuntBot commented Dec 27, 2018

rizdaprasetya commented Sep 5, 2019 • edited Loading

Chimildic commented Dec 18, 2020 • edited Loading

iammerrick commented Aug 3, 2021 • edited Loading

zhangtian512 commented Jan 9, 2024

stdword commented Jul 6, 2024 • edited Loading

rizdaprasetya commented Sep 5, 2019 •

edited

Loading

Chimildic commented Dec 18, 2020 •

edited

Loading

iammerrick commented Aug 3, 2021 •

edited

Loading

stdword commented Jul 6, 2024 •

edited

Loading