Linking To Content On The Same Page

Using Your Element Ids

A very simple feature to add to your web page is a link to content that isn’t currently visible. This can be very handy if your page is particularly long and you want to save your users from manually scrolling with their mouse.

For this basic example, I have a page showing eight gardening images. Four of the images were taken when the garden was overgrown and the other four were taken after the garden had been tidied up (I know, exciting isn’t it?). I want the user to be able to click a link and toggle between the ‘before’ and ‘after’ image groups.

HTML

<body>
<div id="wrapper">
    <h2 id="before">The 'Before' Pictures</h2>
    <h3><a href="#after" title="View images taken after the work was started. You will remain on this page.">Click here to see the 'after' pictures</a></h3>
    <img src="images/before1.jpg" alt="before the work" />
    <img src="images/before2.jpg" alt="before the work" />
    <img src="images/before3.jpg" alt="before the work" />
    <img src="images/before4.jpg" alt="before the work" />
    <h2 id="after">The 'After' Pictures</h2>
    <h3><a href="#before" title="View images taken before the work was started. You will remain on this page.">Click here to see the 'before' pictures</a></h3>
    <img src="images/after1.jpg" alt="after the work" />
    <img src="images/after2.jpg" alt="after the work" />
    <img src="images/after3.jpg" alt="after the work" />
    <img src="images/after4.jpg" alt="after the work" />
</div>
</body>

As you can see, there is nothing complicated here. Each h2 has an id which is then linked to by appending that id onto the end of the page URL. Remember that these links are relative to the page they are on so…

1	<a href="#before">

…actually points to www.mysite.com/mypage.html#before which automatically takes the browser to that element on the page. A common usage of this is when you place a ‘back to the top’ link at the bottom of your page.

You can see my basic example here.

A quick note of caution, however. Making the viewable page area instantly change can be disorienting to some of your users. If possible, let them know that they are still on the same page. You can use the title attribute to do this or perhaps implement a javascript library which has a Scroll module/plugin like mootools.

The Scroll effect lets the user clearly see that they are still on the same page as they scroll to the next section. This is what I chose to do on my portfolio page.

Category: CSS, Javascript // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan