How do I add an animated scrolling option on a html webpage?

Question

I've recently started learning html and CSS. I have no knowledge of javascript, but I will learn soon. I want to know how to use a link on a page to scroll the page down to another portion of the same page in an animated fashion. For instance if the page has 2 parts, a "home" and an "about me" part, I want a link that will scroll the page down to the about me part from the home part. Is it possible to do this without javascript?

Answer 1

For the section you want to jump to, like the "about me" section, what you do is you create an anchor tag and you give it an id and then in your link, you set the link href source to the id of the anchor tag. This will make your link, when clicked, jump to the section that has the matching ID. Now this will jump you to the section, not necessarily animate it in a scrolling fashion.

Example:

link:
<a href="#about_me">About Me</a>

About me section
<a id="about_me">About Me section</a>

You could even leave the anchor tag blank and the link will still jump to that section like so:

<a id="about_me"></a>