Anchor link (or bookmark) not scrolling to the correct section of the page on first load #1316

New Issue

OVERLORD · 2026-02-05T00:35:10+03:00

OVERLORD commented

2026-02-05 00:35:10 +03:00

Originally created by @over-soul on GitHub (Aug 27, 2019).

Describe the bug
Anchor/bookmark links do not scroll to the correct spot on the page on first load of the page. The page scrolls to the correct spot if you refresh the page.

Steps To Reproduce
Steps to reproduce the behavior:

Copy link to a specific paragraph using the built-in double click popup
Open a private window (incognito) and paste the link into the new window
The page does not scroll to the correct place on first load
Refresh the page and it takes you to the correct spot

Expected behavior
Should scroll you to the correct spot on the page on first load

Screenshots
N/A

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): BookStack v0.26.4
PHP Version: 7
Hosting Method (Nginx/Apache/Docker): Nginx

Additional context
Issue is present in all browsers (Chrome, FF, IE

Originally created by @over-soul on GitHub (Aug 27, 2019). **Describe the bug** Anchor/bookmark links do not scroll to the correct spot on the page on first load of the page. The page scrolls to the correct spot if you refresh the page. **Steps To Reproduce** Steps to reproduce the behavior: 1. Copy link to a specific paragraph using the built-in double click popup 2. Open a private window (incognito) and paste the link into the new window 3. The page does not scroll to the correct place on first load 4. Refresh the page and it takes you to the correct spot **Expected behavior** Should scroll you to the correct spot on the page on first load **Screenshots** N/A **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): BookStack v0.26.4 - PHP Version: 7 - Hosting Method (Nginx/Apache/Docker): Nginx **Additional context** Issue is present in all browsers (Chrome, FF, IE

OVERLORD closed this issue

2026-02-05 00:35:14 +03:00

OVERLORD commented

2026-02-05 00:35:17 +03:00

@ssddanbrown commented on GitHub (Aug 27, 2019):

Hi @over-soul,
Thanks for opening this issue.

When you say:

The page does not scroll to the correct place on first load

Does the page still scroll somewhere, but just not the right place? Or does it not scroll at all?

If you click on the below link, for the demo site, Is the bottom paragraph starting with "Fruitful" brought into view?

https://demo.bookstackapp.com/books/bookstack-user-guide/page/examples-of-different-content#bkmrk-05bac

@ssddanbrown commented on GitHub (Aug 27, 2019): Hi @over-soul, Thanks for opening this issue. When you say: > The page does not scroll to the correct place on first load Does the page still scroll somewhere, but just not the right place? Or does it not scroll at all? If you click on the below link, for the demo site, Is the bottom paragraph starting with "Fruitful" brought into view? https://demo.bookstackapp.com/books/bookstack-user-guide/page/examples-of-different-content#bkmrk-05bac

OVERLORD commented

2026-02-05 00:35:20 +03:00

@over-soul commented on GitHub (Aug 28, 2019):

Hi @ssddanbrown,

Sorry about the false alarm. I figured this one out! It had to do with the way I was loading my fonts using Typekit (Adobe Fonts). I changed the implementation and now it is working fine.

Thanks!

@over-soul commented on GitHub (Aug 28, 2019): Hi @ssddanbrown, Sorry about the false alarm. I figured this one out! It had to do with the way I was loading my fonts using Typekit (Adobe Fonts). I changed the implementation and now it is working fine. Thanks!

OVERLORD commented

2026-02-05 00:35:22 +03:00

@over-soul commented on GitHub (Aug 31, 2019):

Hi @ssddanbrown!

I have been able to confirm this does in fact have to do with the fonts that are used on the site. I switched the fonts to:

<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|EB+Garamond&display=swap" rel="stylesheet">

With this CSS:
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, .dropdown-menu a, .dropdown-menu button { font-family: 'Didact Gothic', sans-serif; } body, p, ul, div.page-content>div>ul>li { font-family: 'EB Garamond', serif; } #entity-dashboard > div.tri-layout-middle > div > div.content-wrap.card > div.book-content > p { font-family: 'Didact Gothic', sans-serif; } h1 { font-size: 28px; font-weight: 700; } .page-list h4 { font-size: 1.5em; } h4.entity-list-item-name.break-text { font-size: 18px; } p, div.page-content>div>ul>li { font-size: 17px; }

Most of the time the scrolling position is fairly accurate on first load, but if you try it enough times with different # links you will find that sometimes it is inaccurate by a few lines. Again, this is only an issue on first load (if you refresh the page, it scrolls to the correct spot).

@over-soul commented on GitHub (Aug 31, 2019): Hi @ssddanbrown! I have been able to confirm this does in fact have to do with the fonts that are used on the site. I switched the fonts to: `<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|EB+Garamond&display=swap" rel="stylesheet"> ` With this CSS: `div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, .dropdown-menu a, .dropdown-menu button { font-family: 'Didact Gothic', sans-serif; } body, p, ul, div.page-content>div>ul>li { font-family: 'EB Garamond', serif; } #entity-dashboard > div.tri-layout-middle > div > div.content-wrap.card > div.book-content > p { font-family: 'Didact Gothic', sans-serif; } h1 { font-size: 28px; font-weight: 700; } .page-list h4 { font-size: 1.5em; } h4.entity-list-item-name.break-text { font-size: 18px; } p, div.page-content>div>ul>li { font-size: 17px; }` Most of the time the scrolling position is fairly accurate on first load, but if you try it enough times with different # links you will find that sometimes it is inaccurate by a few lines. Again, this is only an issue on first load (if you refresh the page, it scrolls to the correct spot).

OVERLORD commented

2026-02-05 00:35:23 +03:00

@over-soul commented on GitHub (Sep 1, 2019):

This is fixed in 0.27 release.

@over-soul commented on GitHub (Sep 1, 2019): This is fixed in 0.27 release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1316