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
Jacob Thomson
757 PointsNeed 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>
5 Answers
Emma Willmann
Treehouse Project ReviewerYou 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
757 PointsI edited my question, it would be great if you could help me further! Thanks
Zach Allan
19,452 PointsYou 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
757 PointsI edited my question, it would be great if you could help me further! Thanks
Yerko Palma
2,662 PointsMaybe this link helps you.
Jacob Thomson
757 PointsI edited my question, it would be great if you could help me further! Thanks
Alvin Rudiyanto
13,149 PointsHi 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
757 PointsI edited my question, it would be great if you could help me further! Thanks
Alvin Rudiyanto
13,149 PointsUpdated 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
Emma Willmann
Treehouse Project ReviewerEmma Willmann
Treehouse Project ReviewerAs 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.