Fragment Highlighter

This script provides a way to alert users to which section of the page (fragment) you have linked them to using fragment identifiers.

The script unobtrusively adds a behaviour to any link to a fragment of the page (links where the href attribute starts with #).

When the user activates these links, the browser takes the user as close as possible to that point in the page, then the Frag Link behaviour highlights the section.

See also:

Road map

  1. Add configuration variables for highlight method (flash or constant highlight), also for flash duration.

    Update: As of version 1.1 Fragment Highlighter can be configured for highlight method, highlight classname, flash duration and flash colour.

  2. Extend the script to highlight the appropriate section of the page on page load if a fragment appears in the URL

    Update: As of version 1.1 Fragment Highlighter will highlight the appropriate section of the page if a fragment identifier is specified in the URL or if the URL fragment identifier is updated after page load (this required the inclusion of the utilities code).


Place the following code in the <head>
of your XHTML document.

<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.utilities.pack.js"></script>
<script type="text/javascript" src="frag-hi.js"></script>

Now, you can just create content sections with id attributes and link to them as you need to:

<p>... read all about it at <a href="#section-a">Section A</a></p>
<div id="section-a">
	<h2>Section A</h2>
	<p>Some content worth linking to...</p>


Fragment Highlighter is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.


Download the complete Fragment Highlighter 1.1 example package (.zip)

Individual files

Posted in

Leave a reply