Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

highlight anchor?

10:04 pm on Apr 26, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 26, 2005
votes: 0

I have a webpage with several html anchors. The anchor part works ok, but when I click on the links, I only goto to the part of the page with all the anchors (all anchors are gathered low in the page) and I wanted to know if there is any way of highlighting the specific anchor that the user has clicked on.
Thank you.
1:43 am on Apr 27, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2143
votes: 7

Are you talking about anchors within the page, a.k.a. bookmarks? If that is the case, each bookmark should have its own unique name, e.g.

<a name="bookmark_1">Bookmark One</a>
<a name="bookmark_2">Bookmark Two</a>

You links would read <a href="bookmark_1">Go To Bookmark One</a> or if you are coming from a different page, the anchor would be <a href="widgets.com#Bookmark_1">Go To...</a>.

If your bookmarks are in the same line, there is no way ti really distinguish the target bookmark. If they are above one another, each bookmark should align with the top of the window when selected.


7:38 am on Apr 27, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 4, 2004
votes: 0

If you mean you want to highlight the target selected such as giving it a different background color I've seen this done on phpbb's site in their rules section. There's a piece of javascript they use, it will highlight whatever rule you click on.
5:40 pm on Apr 28, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 10

I put together a very quick (rough) example, which uses the Yahoo UI Library for some of its Event and Dom utility capabilities. It's likely that this could be really cleaned up, but I just wanted to throw something together to get you started. It requires you to give the links that you'll click on a class of 'gotolink', and your named anchors must have an id value that matches the name value.

<style type="text/css">
div {
padding-top: 900px;
.activeLink {
background-color: #ffff00;
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<a href="#link1" class="gotolink">Go to Link 1</a>
<a href="#link2" class="gotolink">Go to Link 2</a>
<a href="#link3" class="gotolink">Go to Link 3</a>
<a name="link1" id="link1">Link 1</a>
<a name="link2" id="link2">Link 2</a>
<a name="link3" id="link3">Link 3</a>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var i, target;
var gotoLinks = YAHOO.util.Dom.getElementsByClassName('gotolink', 'a');
var targetLinks = [];
// Build the list of target links first (so we can reset them)
for (i = 0; i < gotoLinks.length; i++) {
target = document.getElementById(gotoLinks[i].href.split('#')[1]);
targetLinks[targetLinks.length] = target;
// targetLinks now contains all of the links that we link to
for (i = 0; i < gotoLinks.length; i++) {
YAHOO.util.Event.on(gotoLinks[i], 'click', function (e, t) {
var j;
var aname = this.href.split('#')[1];
for (j = 0; j < t.length; j++) {
YAHOO.util.Dom.replaceClass(t[j], 'activeLink', 'dormantLink');
YAHOO.util.Dom.replaceClass(aname, 'dormantLink', 'activeLink');
}, targetLinks);
6:58 pm on Apr 30, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Feb 12, 2006
votes: 0

You can get that effect through the CSS pseudo class :target. suckerfish [htmldog.com] has a way of enabling support in IE