Scroll to internal HTML/CSS upon button click

Hello! I’m relative newbie when it comes to HTML & CSS. I managed to get my portfolio where it is now with a lot of hard work and dedicated research. However, I’m having an issue. In my navi bar, when I click on “Portfolio”, I want it to scroll to the Portfolio section of my site (same for clicking on Contact & About). I looked online at a couple different JS/CSS/HTML options but none seemed to do the trick. Just wondering how to go about this. I tried to use a $.scrollto function, but we haven’t really learned that yet. We’ve only learned basic JS thus far, so I’m a little out of my depth but making it work so far! I just need help on this one thing. Any help would be much appreciated :slight_smile: Thank you in advance

Here’s a link to my portfolio where you will hopefully be able to see my code: https://codepen.io/caitalx/pen/zWMyVN

Sorry about my initial reply. I misunderstood. You don’t have enough content vertically. You should pad it with some lorem ipsum so that it goes off the screen so that it can be scrolled to.

And if you’re looking for how to do scrollspy in vanilla JS:
https://forum.freecodecamp.org/t/the-power-of-vanilla-js-scrollspy-without-bootstrap/184134/3

I’ll try this out, thanks for the quick response!

1 Like

Thought I would do a short little update: After trying so many things, and nothing working, I finally figured out what I was doing wrong! It was such a stupid mistake and now I feel dumb, but I was staring it in the face. I had my a href = “portfolio” and id = “portfolio” right beneath it. However, I didn’t actually put the ID on the text where I wanted the scrolling to stop. When I realized it, I was like duh! The ID obviously needs to go where I’m telling the link to go and not just right beneath it (which is what the examples had, but no examples had as much writing as I did). All good now! Thanks so much.

1 Like

Yeah, the painful typo lessons and “duh!” moments are what turn one into a blazing-fast coder. Pain is our teacher :slight_smile: