HTML bookmaks using id attribute not working in Hub site pages and navbar header

[JamieHawk]

Hi there,

I recently launched an ArcGIS Hub site Open Data Midpen.

There appears to be an issue with HTML bookmarks that use the id attribute, which I would like to use to jump readers to specific parts of the page. I suspect it has something to do with the custom HTML/CSS navigation bar I developed (thanks, MM, for this inspirational story map). Or perhaps I am misusing id attributes somehow. I attached the HTML and CSS code of the custom navbar to the post.

Within some pages, I used the HTML id attribute to assign a unique ID to header elements within a larger block of text.

Example 1 id="overview"

<div class="banner-heading" id="overview">Find the right trail</div>

Example 2 id="help-resources"

<section id="help-resources"><h1>Help resources</h1></section><blockquote class="blockquote">Review materials below[...]</blockquote>

Then, I took these bookmarks and added links to the navbar:

<li>
 <a href="https://opendata-mrosd.hub.arcgis.com/pages/find-the-right-trail#overview">Overview</a>
</li>

<li>
<a href="https://opendata-mrosd.hub.arcgis.com/pages/find-the-right-trail#help-resources">Help resources</a>
</li>

I also inserted a hyperlinked text string within the page body:

<section id="trail-explorer"><h1 style="text-align: left;">Trail Explorer app</h1></section><blockquote style="text-align: left;" class="blockquote">Filter trails based on your recreational and mobility needs. Review the <a href="https://opendata-mrosd.hub.arcgis.com/pages/find-the-right-trail#help-resources">help resources</a> before you begin.</blockquote>

So, when a user navigates from another site page (e.g. Home) to the Find the Right Trail page via the header link, they get to URL.com#overview. Then, after clicking hyperlinked text string, it jumps the user down the page as expected. While on that page, users can click on the other header drop-down items for the page they are on, and it jumps them around. Great!

BUT, when a user gets to the Find the Right Trail page via the direct URL (no #overview at the end of URL), the hyperlinked text string does not do anything, neither does the header.

Is this a bug?

Are there issues with my code? Admittedly, I am a novice when it comes to HTML/CSS/bootstrap (for now!).

Any clever workarounds?

Many thanks,

Jamie Hawk

[croush2024]

I have this same problem. In my header I have links to bookmarks within a page. In the link, I specify both the page and bookmark, since the user may not be on that page when they use the link. The behavior is inconsistent but most often it won't move to the bookmark location if they are already viewing that page. I'm suspecting a cache issue but don't find any way in the hub to force it to reload.

[croush2024]

I have isolated when this problem occurs for me and found a workaround.

Assumptions: (1) a custom header which links to page 1, page 2,and page 2 bookmark; (2) links include page info as well as the bookmark ID because the page with the bookmark may not be the current page.

This recreates the problem:

1. While looking at page 1, choose link to page 2 from header

2. Then choose  link to page 2 bookmark from header. Nothing happens.

The problem only happens if I visit the page without a bookmark before following a link with the bookmark on the same page. It would work if the link were only #bookmarkname, but the page must be included as well because the user may start on a different page.

Workaround: Place a bookmark at the top of page 2 and use it when visiting the page as a whole. This seems to result in a different state which allows page 2 bookmark to then work afterward.

My theory is a caching issue. Once page 2 is visited without the bookmark, the link is perhaps seen as unchanged when the link with the bookmark is chosen.

The disadvantage to the workaround is that the page jumps down a small amount once the page fully loads. It seems that there is no way for a bookmark to represent the absolute top of the page.