1

We're using URL hashes in some places in our app to filter the display, e.g. #highlight=free will highlight our free content. We use javascript to process the hash, listen to hash changes. All works great.

We're wondering however about the best way to mix it with "real" HTML anchor links. i.e. links that point to a specific html id on the page, e.g. #chapter-5.

Should we implement jumping to the right place using javascript and stop relying on the default browser behaviour? for example, link to #chapter=chapter-5&highlight=free and handle both filter and anchor in javascript? Or is there a safe/standard way to "mix" anchors and custom hashes?

Improve this question
4
  • 1
    There's no standard way for this. The original purpose of URL hashes is solely to jump to an anchor. This doesn't mean it's a bad practice to use hashes for other purposes or mix them with the anchoring but then you will need to do it in JS. Commented Aug 25, 2015 at 9:36
  • Thanks. That's what I thought, particularly since the anchor is kinda (ab/re)used by JS, but was wondering if there's some kind of "best practice" for mixing the original anchor use-case and new use together in a clean/idiomatic way. Commented Aug 25, 2015 at 9:42
  • 1
    Should be trivial enough for you to define a logic to do that. For example you could use an anchor parameter to scroll to that element if one with such name or id exists? Commented Aug 25, 2015 at 9:50
  • Thanks Andrea. That's what we're thinking of doing, but thought it's best to check if this is the right approach, since it does re-invent the wheel a bit (even if in a fairly trivial way). Commented Aug 25, 2015 at 10:07

2 Answers 2

Reset to default
1

If your target environment allows it, then the "safe/standard way" would be to leave hashes with old-school hash (commonly seen as "hashbang") approach alone for regular in-page anchors and use modern HTML5 history API instead.

If you must support older browsers you can use some polyfill that resorts back to that hash.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Sorry, but I don't quite understand the answer, or how it answers my question to be honest... Maybe I'm missing something though.
I tried to point out that you can actually have your application working with "real" URL parameters and/or paths and completely avoid "(ab/re)using anchors" in JS. For example you can change displayed URL to path?highlight=free calling history.pushState({},'','path?highlight=free'), what is the 'standard' way modern SPAs works. Is it more clear now? Sure thing you must adapt your server-side routing then. (It is true you haven't asked for "hash alternatives", but that "standard ways" connected to "hash" technique commonly considered obsolete rung by bell.)
Thanks for clarifying. It makes more sense. One thing about using url query params instead of hash is that Google will index those pages and it might have some impact on SEO, whereas hash params are not indexed (unless you use hashbang, which we don't). Since we want to use those links to point people to, say a page with highlights, we prefer hash params over url query.
Thanks for your answer and clarification. I upvoted it, but since it didn't directly answer the question, I decided to write my own answer.
0

The comments to the question were probably the most helpful so far, and so we chose to implement anchor jumping and deal with everything after the # in javascript, and not rely on built-in support in browsers for it.

For those interested, we use a combination of jquery.deparam, URI.js and some custom code to listen to hash changes and hook into our own functions. We also played with Hasher.js which looked nice, so we might use it in future.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.