Can I do this in just HTML or does it have to be JS?

[deboer753]

I have one page, and ONE page only, of HTML with different sections of anchors when scrolling instead of bringing a user to another page( similar to this video Smooth Scrolling with Sticky Header Menu via HTML CSS only | Page Scroll via Sticky Navbar Menu - YouTube)

• The only difference between my webpage and this videos webpage mentioned above, is that once I add id=“about” in the <h1> element and then also link the anchors href="#about" it WONT scroll smoothly to the about section. Instead it abruptly shows up at the about section. I tried adding:

html  {
       scroll-behavior: smooth;
}

// or

*  {
     scroll-behavior: smooth;
}

(but no luck…any help on this?)

[a_aramini]

Here’s an MDN web doc about that, it seems like a newer feature, but most up-to-date browsers should support it.

You have to implement it via a CSS rule

CSS Scroll Behavior

W3Schools also has a working demo. It works for me and I am on mobile Samsung Internet Browser right now.

If the demo works for you then maybe it’s just your implementation of the CSS rule. If the demo doesn’t work, maybe see if you need a browser update.

W3Schools lists supported browsers for that feature.

W3 Shcools - Smooth Scroll