Iā€™m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Anchor Links

html / links

Estimated reading time: 1 minute, 45 seconds

An anchor is a named point in a page, invisible to the viewer, embedded in code. By using an <a> link you can navigate to not only a specific page, but also a specific location on that page. This is particularly useful when you have very long pages, and want to give the user the ability to navigate to a specific section (for example, in a long article or essay written on a single page).

First, you need to create an anchor point. This is achieved by adding an id attribute to the tag nearest the point your want to jump to: usually, but not exclusively, a heading element. Note that the id attribute value must be unique to that page. For example, a heading element with an id of introduction:

<h1 id="introduction" >Introduction</h1>

While almost any tag may be given an id attribute (and doing so becomes very useful for both CSS and JavaScript), no other element on this page can have an id value of introduction.

Then you need to create a link to this location. Using a standard link tag, write a link to the id attribute value you just created, with a # sign in front of it:

<a href="#introduction">Go to the introduction</a>

Note that you will need plenty of space between the link and the anchor in order to see the page move when you click on this link. The easiest and most forthright method is to enter some filler filler text between the link and its destination.

Assuming that the anchor was on a page called manual.html and you were linking from another page to the specific location of important_info in manual.html the link would be:

<a href="manual.html#important_info">Read this information first<a>
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.