How to make a scrollbar based on anchors?

Question

css

I want to make these anchors. At the top, on the main page, it should look like this:

But when the user scrolls through it in sections, the scrollbar should turn into clickable dots. Like this:

The question is stupid, but is there any script or library with which this can be done? Points, in principle, can be made with pagination Scrollify or fullpage, but how to animate it? Thanks in advance

Answer 1

listen to the scroll event and do actions
1) if you give the dots a class that stretches them wide, if not, then remove the class and they are dots again 2) for smooth animation, here it is written gnatkovsky.com.ua/yakorya-i-plavnyj-perexod-po -yak... 3) the points themselves , that's all it seems) scrollTop == 0