-1

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?

Kshitij Sahu
  • 1
  • Possible duplicate of [HTML Anchors with 'name' or 'id'?](https://stackoverflow.com/questions/484719/html-anchors-with-name-or-id) – ScoobyDrew18 Dec 05 '17 at 16:23
  • Welcome to Stack Overflow! This post will most likely be deleted as it doesn't fit the criteria for allowed questions. There are tons of resources available. Also, the same question has been asked here: https://stackoverflow.com/questions/17631417/css-pure-css-scroll-animation – disinfor Dec 05 '17 at 16:23
  • Possible duplicate of [CSS: pure CSS scroll animation](https://stackoverflow.com/questions/17631417/css-pure-css-scroll-animation) – disinfor Dec 05 '17 at 16:24
  • It is possible in HTML/CSS only using the `scroll-behavior` property (https://css-tricks.com/almanac/properties/s/scroll-behavior/) HOWEVER, at this time this is pretty much only supported in Firefox and Chrome. This means you would need to use a (javascript based) polyfill if you need it to work in other browsers. – delinear Dec 05 '17 at 16:24

1 Answers1

0

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>