Animated Scroll Indicator

[ProRugby2025]

Hi everyone,

I hope you are doing well. I am making a website for a client of mine and I wanted to add a scroll indicator on my website for the about us page to show the timeline for just. It's for this section: "multirow section-template--23693559136584__multirow_Gjf78y-padding gradient color-scheme-1". You can see something like this on this website https://therealworld.net/. I unfortunately dont really know how to code so I hope someone can help me out. I have also provided some example pictures.

Thank you in advance for your troubles.

Kind regards,

Jonathan

[Small_Task_Help]

Hi,

Hope this will help

- Add timeline structure inside About Us section.

- Style using CSS for vertical line.

- Add simple JavaScript to animate line on scroll.

JavaScript example

document.addEventListener("scroll", () => {
  const line = document.querySelector('.scroll-line');
  const scrollTop = window.scrollY;
  const section = document.querySelector('.scroll-timeline');
  const offsetTop = section.offsetTop;
  const sectionHeight = section.offsetHeight;
  const windowHeight = window.innerHeight;

  let progress = (scrollTop + windowHeight - offsetTop) / sectionHeight;
  progress = Math.min(Math.max(progress, 0), 1); // Keep between 0 and 1
  line.style.height = `${progress * 100}%`;
});

[ProRugby2025]

Thank you so much for your reply and thanks for the java code. Unfortunately I dont know how to either add a timeline structure neither do I know how to code CSS. Could you please help me with that it will be greatly appreciated? 

Thank you so much in advance