Scroll Targets and URL Hash

This is a test where a scroll-to target will open an expand, however will then scroll back to the top of the page–or actually an element at the top of the page defined as:
<h2='top'>Scroll Target at Top<H2>

Scroll Target at Top

This is just some filler text to move the expand item a bit further down the screen. In fact, why not just throw in an image and save us all a heap of blibber blabber text. Here is a photo of a donkey stuck in a manhole cover. Silly donkey, you are not a man… you’re a donkey.

Donkey in a hole lot of trouble

Now we place an expand element with a defined ID and scrolltarget value:
[expand title="trigger text" id="monkey" scrolltarget="#top"/]

trigger text
This is some hidden text about a monkey in a bucket.

So navigating directly to
https://spacedonkey.de/3439/scroll-targets-and-url-hash/#monkey

will scroll down to the monkey element, open it, then scroll back up to the top element. This bouncing around is quite annoying.

Introducing: hash-trigger

This is a test where we introduce a new attribute called hash_trigger. This is an secondary id that will be use to expand but not scroll to a collapse element based on the url anchor hash. For example. We create an expand element like so:
[expand title="trigger text" id="smashing" hash_trigger="pumpkins"/]

trigger text
This is some hidden text that will expand but not scroll to

Now when we link directly to the page with the url anchor hash of #smashing it will scroll to and expand the element above as normal. However, if we use the url anchor hash of #pumpkins it will only expand the element and NOT scroll anywhere , providing:
1. there is no other element with an ID of pumpkins
2. there is no scroll-to attribute defined on this expand element.

Note: to assign the hash_trigger using the roll-your-own method, simply assign a data-hash-trigger attribute to the trigger element:

<div class="collapseomatic" id="smashing" title="trigger text" data-hash-trigger="pumpkins">trigger text</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.