Smooth Scrolling & Scroll Spy 🖱️

An interactive navigation system for single-page websites. This project demonstrates smooth programmatic scrolling and dynamic "Scroll Spy" functionality using Vanilla JavaScript.

🔗 View Live Demo on GitHub Pages

📋 Description

This project focuses on creating a seamless navigation experience. Instead of the default "jumpy" anchor links, it uses JavaScript to calculate positions and animate the scroll. It also keeps the navigation menu in sync with the content the user is currently viewing.

The content features classic Ukrainian poetry for demonstration purposes.

✨ Features

• Smooth Programmatic Scroll: Uses window.scrollTo with behavior: "smooth" to navigate between sections.
• Fixed Header Offset: Automatically calculates the header height (header.offsetHeight) to ensure the target section is not hidden behind the fixed navigation bar.
• Scroll Spy (Active State): As you scroll, the navigation links automatically highlight based on which section is currently in the viewport.
• Mouse Tracking Logic: A unique feature that updates the active navigation link based on the mouse cursor's position on the screen.
• Data-Attribute Driven: Uses data-goto attributes in HTML to link navigation items to their respective sections, making the code clean and easy to scale.
• Normalize.css: Includes a CSS reset for consistent rendering across all modern browsers.

🛠 Tech Stack

• HTML5 (Custom data-* attributes)
• CSS3 (Fixed positioning, Transitions, Flexbox)
• JavaScript (ES6+)
  • getBoundingClientRect() for precise coordinate tracking.
  • pageYOffset and scrollTop for scroll monitoring.
  • Event Listeners (click, scroll, mousemove).

🚀 How to Run

1. Clone the repository:

   git clone [https://github.com/igarok88/-smoothScroling.git](https://github.com/igarok88/-smoothScroling.git)

2. Open index.html in your browser.

📂 Project Structure

• index.html — Page structure with sections and navigation.
• style.css — Custom styles and layout.
• normalize.css — Standard CSS reset.
• script.js — Core logic for scrolling and section tracking.

---

Created for educational purposes.