[Solved] Personal Portfolio Webpage- Scrolling and Nav button help

I can’t find a decent how to to make the nav buttons scroll to the href smoothly instead of jumping right to it. The examples I’ve found are way beyond my abilities now and I don’t want to just copy and paste just to finish the assignment.

The Contact nav button doesn’t work and I cannot figure out why. It looks the same as the other buttons!

And lastly, is there a way to get the href to go to a specific part of the page, right now it loads the section in the middle not at the beginning of the section. I.e. when the nav button for portfolio is clicked in loads the middle of the section instead of the start

http://codepen.io/kbakermemphis/pen/EZYWbp

There’s a smooth scroll plugin for jQuery, which is extremely easy to use. If you don’t want to or can’t add that just yet, I’d suggest waiting until you’ve done the first few JavaScript projects.

2 Likes

Smooth Scrolling: I personally like the jQuery implementation. It will target all anchors with the hash symbol in them. See the link below:

Contact Nav: You have the contact content outside of the main col-md-12 wrapper. The anchor for page3-link and its content needs to be moved up into the same div container as page1-link and page2-link.

Jump to Content: The reason for this is that your header is fixed and actually covers up the content as it jumps to position 0 (the very top of the page)…so it gives you the appearance that the content is loading in the middle. To fix this you can add an inline style like style="padding-top:200px;" to offset for the fixed header on each of your page1, page2, page3 divs

3 Likes

@hackmasterS @PortableStick You guys are awesome. Thanks so much!

edit One last thing, how do I mark this post as solved?

You can edit the post title if you want. It’s not required, though.

1 Like