D4D0M3N Posted October 6, 2022 Share 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> Link to comment
Beyondspace Posted October 7, 2022 Share 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
D4D0M3N Posted October 9, 2022 Author Share 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. Link to comment
D4D0M3N Posted October 11, 2022 Author Share 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? Link to comment
D4D0M3N Posted October 13, 2022 Author Share 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> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment