Are there window elements that can be used to determine when you are at the bottom of a webpage?

Viewed 11

I am trying to create a progress bar that shows how far someone is on the webpage, I also wanted the user to be able to jump ahead to the next section after clicking on the progress bar. There are currently 2 problems:

1.) The progress bar will only move you to the next section if you have already scrolled. I would like it to move ahead to each section regardless if the user has scrolled.

2.) When you get to the final section the button won't move you back to the first section at the top of the webpage.

[javascript]

const progressBarFN = () => {
    //ProgressBarFN Variables
    const pageViewportHeight = window.innerHeight;
    const pageHeight = document.documentElement.scrollHeight;
    const scrolledPortion = window.pageYOffset;
    const scrolledPortionDegree = (scrolledPortion / (pageHeight - pageViewportHeight)) * 360;
    const scrollBool = scrolledPortion + pageViewportHeight === pageHeight;
    //End of Variables

    //Progress Bar Tracker Conditional
    halfCircle.forEach(el => {
        el.style.transform = `rotate(${scrolledPortionDegree}deg)`;

        if(scrolledPortionDegree >= 180) {
            halfCircle[0].style.transform = 'rotate(180deg)';
            halfCircleTop.style.opacity = "0";
        } else {
            halfCircleTop.style.opacity = "1";
        }
    });
    //End of Progress Bar Tracker Conditional
    
    //Progress Bar Click
    progressBar.onclick = e => {
        e.preventDefault();

        //Progress Bar OnClick Variables
        const sectionPositions = Array.from(sections).map(section => scrolledPortion + section.getBoundingClientRect().top);

        const position = sectionPositions.find(sectionPosition => {
            return sectionPosition > scrolledPortion;
        });
        //End of Progress Bar OnClick Variables

       //OnClick conditional
        if (scrollBool) {
            window.scrollTo(0,0);
        } else {
            window.scrollTo(0,position);
        };
       //End of OnClick Conditional 
    };
}
progressBarFN();
  • sidenote: I have declared this function after its declaration and within a scroll eventObjectlistener.

I believe the problem has something to due with the progressBarFN's initial variables. Especially with my scrollBool variable.

0 Answers
Related