Bookmark Anchors Activity
First, examine the HTML code. The overall structure of this page includes
a HEADER which includes the NAV, this ASIDE,
two SECTIONs with detailed information,
and a FOOTER with references for the information.
The plan for this page is to create links in the NAV that "Jump"
the scrollbar down to the two SECTIONs, and then also add a
"Top" link that is always visible in the bottom right corner.
To start this plan, we need know the ID attributes of the SECTIONs.
These IDs will act as the URLs for the hyperlinks in the NAV.
If the SECTIONs did not already have IDs, we would have to add them.
Now create the links. Modify the contents of the NAV element to read
Jump To <a href="#section-species">Species</a> or <a href="#section-facts">Facts</a>.
Save and test. These links will now adjust the scroll position.
Clicking "Species" will now bring the heading "Notable Hedgehog Species" to the top of the screen.
Depending on your window size, clicking on "Facts" may not bring the heading "Interesting Facts"
all the way to the top, because there may not be enough content below it to fill the screen.
That's is ok for this page, but for other projects you may wish to extend the content or
the whitespace for a more consistent effect.
Use the following CSS to enhance the "Jump to" links to look more like navigation buttons:
nav a{
display: inline-block;
text-decoration: none;
border: 4px outset #259998;
border-radius: 4px;
background-color: #259998;
color: #FFE4EB;
padding: 4px;
}
nav a:active{
border-style: inset
;
}
Save and test.
Next, you will create the "Top" button by placing the following code
after the closing FOOTER tag but before the closing BODY tag:
<a id="toplink" href="#">↑ Top</a>
Save and test to see the link at the bottom of the page. If you click the link,
the browser will reset the scroll back to the top of the page.
This will be more useful if it was visible no matter how far the visitor has scrolled.
You can accomplish this using fixed positioning in the CSS:
#toplink{
position: fixed;
bottom: 10px;
right: 10px;
text-decoration: none;
}
Save and test. Now the "Top" link should remain in the bottom right corner,
regardless of the how far the user has scrolled. It has been removed from normal flow,
so its previous position collapsed, and the FOOTER is again the very last thing on the page.
All finished!
