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

296
0
11-17-2023 02:29 PM
Labels (2)
JamieHawk
New Contributor II

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

0 Kudos
0 Replies