A great way to enhance user experience is by providing a scroll indicator that visually represents the user’s current position on the page. In this tutorial, we will create a scroll-based page wireframe indicator using HTML, CSS, and JavaScript. The indicator will move dynamically inside a mini-map of the entire webpage and display the scroll percentage in real time.
Below is the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Page Wireframe Indicator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>Scroll to See the Page Wireframe Indicator</header>
<section id="home"><h2>Home Section</h2></section>
<section id="about"><h2>About Section</h2></section>
<section id="services"><h2>Services Section</h2></section>
<section id="contact"><h2>Contact Section</h2></section>
<div class="sitemap" id="sitemapBox">
<div class="indicator" id="scrollIndicator"></div>
</div>
<div class="scroll-percentage" id="scrollPercentage">0%</div>
<script src="script.js"></script>
</body>
</html>2. CSS for Styling
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
section {
height: 100vh;
border-bottom: 2px solid #ddd;
}
.sitemap {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(51, 51, 51, 0.9);
color: #fff;
width: 50px;
height: 200px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.indicator {
position: absolute;
width: 100%;
height: 10px;
background: red;
transition: top 0.2s ease-in-out;
}
.scroll-percentage {
position: fixed;
bottom: 230px;
right: 20px;
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}3. JavaScript Functionality
document.addEventListener("DOMContentLoaded", function () {
// Get references to the sitemap, indicator, and scroll percentage display
const sitemap = document.getElementById("sitemapBox");
const indicator = document.getElementById("scrollIndicator");
const scrollPercentageDisplay = document.getElementById("scrollPercentage");
function updateIndicator() {
// Calculate the total scrollable height of the document
let pageHeight = document.documentElement.scrollHeight - window.innerHeight;
// Get the current vertical scroll position
let scrollY = window.scrollY;
// Calculate the percentage of the page that has been scrolled
let scrollPercentage = (scrollY / pageHeight) * 100;
// Determine the position of the indicator inside the sitemap
let indicatorPosition = (scrollPercentage * (sitemap.clientHeight - indicator.clientHeight)) / 100;
// Update the position of the scrolling indicator in the sitemap
indicator.style.top = `${indicatorPosition}px`;
// Update the scroll percentage display
scrollPercentageDisplay.textContent = `${Math.round(scrollPercentage)}%`;
}
// Attach the function to the scroll event to update in real-time
window.addEventListener("scroll", updateIndicator);
// Initialize the indicator on page load
updateIndicator();
});This scroll-based wireframe indicator enhances user navigation by providing a visual map of the webpage. It can be further improved by adding section labels or animations.
Feel free to tweak the design and functionality to fit your project! 🚀
Demo
At Mossawir.com, we are committed to protecting the privacy of our clients and website visitors. This Privacy Policy outlines how I collect, use, and protect your personal information when you visit our website or engage with our services.
I collect the following types of information to provide better services to our clients:
I use the collected information to:
I do not sell or rent your personal information to third parties. Your information will only be shared when necessary to fulfill your project requirements or comply with legal obligations.
My website uses cookies to enhance your browsing experience. Cookies help us understand how you use our website and allow me to offer personalized content or services. You can control or disable cookies through your browser settings, but please note that some features of our website may not function properly if cookies are disabled.
I implement a variety of security measures to safeguard your personal and project-related information. While I strive to use commercially acceptable means to protect your data, no method of transmission over the internet is 100% secure. Therefore, we cannot guarantee its absolute security but work diligently to prevent unauthorized access.
I may use third-party tools or services to improve our website or deliver our services. These third parties may collect information about your interaction with my website. However, I ensure that any third-party services we use adhere to strict privacy and security standards.
You have the right to:
To exercise these rights, please contact me using the information provided below.
I may update this Privacy Policy from time to time to reflect changes in our practices or legal obligations. The updated policy will be posted on this page, and the effective date will be revised accordingly.
If you have any questions or concerns regarding this Privacy Policy or how we handle your data, please contact us at:
By using my website and services, you agree to the terms of this Privacy Policy.
I take client confidentiality very seriously and am committed to maintaining the privacy and security of all information shared during our project. Below are the key principles I adhere to:
Confidential Information
Any information you provide, including business details, design specifications, proprietary data, or any other sensitive material, will be treated as strictly confidential.
Non-Disclosure
I will not disclose, share, or use any confidential information for any purpose outside the scope of your project. Information shared will be used solely for the purpose of delivering the services you've hired me for.
Data Security
All files, assets, and credentials will be stored securely, ensuring that no unauthorized third parties can access your information. Upon project completion, sensitive data will be properly stored or destroyed, as per our agreement.
Third-Party Involvement
If third-party collaboration is required, I will ensure that any partners or subcontractors adhere to the same confidentiality standards.
Ownership of Work
All project-related files, code, and design materials developed during the project remain your intellectual property, and no elements will be reused or shared without your consent.
Post-Project Confidentiality
Even after the project is completed, all confidential information shared will continue to be protected.