D4D0M3N Posted October 6, 2022 Posted October 6, 2022 Hi, I would like to creat a scrolling percentage indication on my one page website. I found this code, but somehow can't make work: <script> // Replace the this class with the class of the text element where you would like to display the percentage. let scrollText = document.querySelector('.your-class'); // This function is calculating the percentage of the current position. function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100; } // This updates the text with the percentage of the function above. window.addEventListener("scroll", () => { let currentScroll = parseInt(getScrollPercent()); scrollText.textContent = currentScroll; }); </script>
Beyondspace Posted October 7, 2022 Posted October 7, 2022 19 hours ago, D4D0M3N said: Hi, I would like to creat a scrolling percentage indication on my one page website. I found this code, but somehow can't make work: <script> // Replace the this class with the class of the text element where you would like to display the percentage. let scrollText = document.querySelector('.your-class'); // This function is calculating the percentage of the current position. function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100; } // This updates the text with the percentage of the function above. window.addEventListener("scroll", () => { let currentScroll = parseInt(getScrollPercent()); scrollText.textContent = currentScroll; }); </script> Can you share your site with the site-wide password so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
D4D0M3N Posted October 9, 2022 Author Posted October 9, 2022 Yes, of course. domengabriel.com/testorecode 312 However, I curently don't have this code installed, as I don't know how to set the html and css for it.
D4D0M3N Posted October 11, 2022 Author Posted October 11, 2022 Quote On 10/7/2022 at 5:04 PM, bangank36 said: Can you share your site with the site-wide password so I can take a look? Can you help me with this?
D4D0M3N Posted October 13, 2022 Author Posted October 13, 2022 With the help of bangank36 we found the solution which works very well: https://codingartistweb.com/2021/08/page-scroll-percentage-with-javascript/ 1. Step, put this code into code block: <div id="progress"> <span id="progress-value"></span> </div> <style> #progress{ height: 100px; width: 100px; border-radius: 50%; position: fixed; bottom: 25px; right: 25px; box-shadow: 0 0 10px rgba(0,0,0,0.2); display: grid; place-items: center; } #progress-value{ display: block; height: calc(100% - 20px); width: calc(100% - 20px); background-color: #ffffff; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 20px; } </style> 2. Step, put following JS script into footer injection. <script> let scrollPercentage = () => { let scrollProgress = document.getElementById("progress"); let progressValue = document.getElementById("progress-value"); let pos = document.documentElement.scrollTop; let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrollValue = Math.round( pos * 100 / calcHeight); scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`; progressValue.textContent = `${scrollValue}%`; } window.onscroll = scrollPercentage; window.onload = scrollPercentage; </script>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment