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

CSS

Zachary Jeans
Zachary Jeans
10,755 Points
Posted by Zachary Jeans
Zachary Jeans
10,755 Points

Move content down after clicking a link?

Ok so I know there is a video that mentions how to do this, but I can't find it anywhere.

I have created a navigation that links to different sections of a website while staying on the same page. However, when I click the link the content I want to see is at the top of the screen which makes it hard to read because you have to scroll back up to put the paragraph back in the middle of the screen. I need to somehow set the content in the middle of the screen when I click the link. There's a way to do this with css but I can't find the video :(. If you know the video please let me know so I can find it again!

1 Answer

Daniel Landon Jr
Daniel Landon Jr
14,733 Points
Daniel Landon Jr
Daniel Landon Jr
14,733 Points

You could try this ...

<span class="anchor" id="X"> 

.anchor {
  position:absolute;
  transform:translateY(-50vh);
}

The span would be your actual target point so place it above the desired content.

This works and there are several other options as well. Try a Google search on this subject for further examples.

I hope this helps

Zachary Jeans
Zachary Jeans
10,755 Points
Zachary Jeans
Zachary Jeans
10,755 Points

That does move the content but it also makes the paragraph overlap the paragraph above it. Iā€™m trying to move the screen as if I had scrolled the page back up. Any way to move everything so that the content Iā€™m linking to is in the middle of the screen without affecting the content around it?