Personal Portfolio... how to make it scroll?

1

Hi guys!
Recently I’ve been working on the Responsive Web Design course and on the example that they give you for the last challenge https://codepen.io/freeCodeCamp/full/zNBOYG (Personal Portfolio) when you click on any of the a elements on the navigation bar (about, work, contact) it does’t “teleport” straight to where the a element is referenced to, instead is sort of slides to that location…
could anybody tell me how to do that??

Thanks in advance!

2

Use the browser dev tools to take a look at the CSS properties set on the html element. I think one will jump out at you.

3

If I recall right it’s something like this:

<a href="#home-section"></a>

<div id="home-section"></div>
4

This would just take me to the div that has the id home section, but if you look at the example you get from FreeCodeCamp when you click on it, it doesn’t just “teleport” to the div element, it scrolls nicely to it!
I haven’t been able to figure out how to do it! :frowning:

5

That’s a good idea! I will try that!

6

I figured it out by looking at the code example. Pretty simple tbh.

In their css they have this:

html {
  box-sizing: border-box;

  /* Set font size for easy rem calculations
   * default document font size = 16px, 1rem = 16px, 100% = 16px
   * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
  */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

I took

  scroll-behavior: smooth;

out and it became like you said, teleporty, but smooth with it there.

1 Like
7

Awesome! thank you so much!
I know it wasn’t relevant to the project in general, but it’s one of those things you need to figure out otherwise you won’t be able to sleep hahaha
Thanks! :slight_smile:

1 Like