Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Review: Creating HTML Content

Jacob Thomson
Jacob Thomson
757 Points

Need help with HTML

Lets say i have a 'about' button in my nav, and an about section further down my one page website. I want is so when visitors come on my page they can click my 'about' button, and it will automatically scroll them down to my 'about' section. Please help me with this! Cannot find help anywhere else. Thanks a lot.

My about section is actually a photo, as is all of my webpage. I have sliced up a psd file and saved it as a html file. Where would i put the 'anchor'?

My button is

<td rowspan="3"> <img src="images/sitelayout_06.jpg" width="60" height="59" alt=""></td>

and my about section is

<td colspan="4"> <img src="images/sitelayout_28.jpg" width="175" height="64" alt=""></td>

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

As it's an empty 'a' tag, nothing will actually be seen. I would probably put the anchor directly before the img tag, but you could try after as well. Try both and then test it. Decide which one brings you to your about section the best.

5 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

You can do this using an anchor.

Create the anchor by placing the following code where your about section will be:

<a name="about"></a>

In your navigation, create a link and reference the anchor by using an href of #about:

<a href="#about">About</a>
Jacob Thomson
Jacob Thomson
757 Points

I edited my question, it would be great if you could help me further! Thanks

You will need to create an 'anchor'.

First, add an ID to wherever you would like the page to scroll to after hitting the about button. This can be a header or paragraph or any element you like that can have an ID. Wherever your about section begins is a good place. Call the ID 'about'. Ex: <h1 id="about">About Section</h1>

Second, in your about button in your nav, you need to link to your ID. To do this use a '#' before the ID name in the href value. Ex: <a href="#about>

Now whenever you click on the about button it will scroll down the page to your h1 titled "About Section".

Hope that helps!

Cheers

Jacob Thomson
Jacob Thomson
757 Points

I edited my question, it would be great if you could help me further! Thanks

Jacob Thomson
Jacob Thomson
757 Points

I edited my question, it would be great if you could help me further! Thanks

Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points

Hi Jacob,

To refer to samepage section, you need to add this to your navigation:

<a href="#about"> <img src="images/sitelayout_06.jpg" width="60" height="59" alt="Link to About"></a>

and add id to your about section:

<section id="about"><img src="images/sitelayout_28.jpg" width="175" height="64" alt="About Section"></section>

To have it scrolling smoothly, you need javascript to do that.
CSS tricks have a jQuery snippet for smooth scrolling

Jacob Thomson
Jacob Thomson
757 Points

I edited my question, it would be great if you could help me further! Thanks

Alvin Rudiyanto
Alvin Rudiyanto
13,149 Points

Updated my answer, that's how I would do it although I strongly recommend against using table as layout (not sure why you have </td> in your code) . Treehouse provides great tutorials around HTML & CSS topic - you should definitely check it out! Maybe along the way learn a bit of JS / JQuery as well