One of the fastest growing trends in website design is the parallax style website. You’ve probably noticed that a lot of new sites allow you to scroll through one page to different sections rather than clicking links to navigate from page to page. Apple’s iPhone 6 product page is a perfect example. The traditional condensed, shorter pages where you can see a small portion of information in one screen used to be the norm, but parallax is becoming more and more popular. The scrolling pages are fun, and allow you to put a lot more info and graphics on a page to keep the content engaging and interactive. Scrolling up and down rather than clicking back and forth is a more natural feel for those that view your website on a smartphone or tablet, as well. It does, however pose a problem: with all that content, how can we quickly jump to the section that is most relevant to what we’re looking for?
One solution is to place links to each section at the top of the page, or at the bottom of each section that directs a viewer to the next section. Wafflehaus Media did a great job of this on their site. These links won’t take you to a new page, but a specific place on the same page. If you link to a page, it will usually bring you to the top of the page so that you can begin your scrolling journey. These links to specific sections are called “anchors.”
The process of linking to a specific section of a page involves html tags placed in two places on your page. The first tag is where you would like to place the link. For example, pretend you are writing a blog post about your favorite music, and you would like to list your favorite albums and then describe a little about the artists behind them. Your list (in simplified code) would look like this:
<ol>
<li>Abbey Road (1969)</li>
<li>The Joshua Tree (1987)</li>
<li>Wish (1992)</li>
</ol>
Now, you’re going to place this tag: <a href=“#target”></a> (Except you can replace ‘target’ with whatever you want). Let’s link Abbey Road to a paragraph about the Beatles.
Your new list would look like this:
<ol>
<li><a href=“#beatles”>Abbey Road (1969)</a></li>
<li>The Joshua Tree (1987)</li>
<li>Wish (1992)</li>
</ol>
Next, scroll down to the paragraph you’ve written about that mop-top British sensation. Insert this second tag at the beginning of the section: <a id=“target”></a> (Except you’ll want to replace ‘target’ with the same anchor you used to set your link).
Your paragraph will look like this:
<a id=“beatles”><h1>The Beatles</h1></a>
<p>The Beatles are a great band that made a huge impact on the world, influencing everything from movies and clothing to art and culture with their songs and lyrics.</p>
After publishing your page, you should be able to click the Abbey Road link in your list of albums and be taken down the page to your paragraph about The Beatles.
Check back to see more tutorials and posts from Kite Media!
**Wanting to link to a specific section of one page from a different page? Simply include #target at the end of the url in the <a> tag for the link. Like so:
<a href=”/blog/link-to-a-specific-place-on-a-page/#beatles”>Click here to learn about my favorite album by The Beatles!</a>