In an app I’m currently working on, I make pretty heavy use of HTML anchors to not only move to target content on the page, but also to load content via AJAX. With normal HTML anchors, clicking on a “source” anchor (e.g., <a href=”#top”>) will jump to the destination anchor (< a name=”top”>). While this is definitely beneficial, the one downside is that this action additionally adds the anchor (“#top”) to the url string (plus, the “jump” in kind of harsh–not very sexy at all).

Since my app is completely AJAX-ified (meaning that there is no navigation between “pages”), I wanted to find a way to preserve the “jumping” behavior of anchors, but not have my url cluttered with anchors.

Turns out that with ExtJS, this is pretty darn easy.

Getting the Anchors

Now of course, you could always modify all of the anchor links in your files to replace all the “href=#…” with onclick JavaScript events. However, what if you have existing anchors that you don’t want to change? With ExtJS, you can easily find all of them and override the default behavior.  In my app, all of my anchors have the following form:

<a href="#WSXXXXXXXXXXXX">...<a>

Since I know that they all begin with More >