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
