kgFFSBFSJsdaKG

📄 File: 1index.html

Path: /home2/outerorb/zapnixinc.com/1index.html
Size: 3.51 KB
Permissions: 0644
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScrollIt Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
    }

    .nav {
      position: fixed;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      padding: 10px;
      border-radius: 5px;
    }

    .nav a {
      color: white;
      text-decoration: none;
      margin: 5px;
      display: block;
    }

    .active {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#" data-scroll-nav="0">Section 1</a>
    <a href="#" data-scroll-nav="1">Section 2</a>
    <a href="#" data-scroll-nav="2">Section 3</a>
  </div>

  <section data-scroll-index="0" style="background: lightcoral;">Section 1</section>
  <section data-scroll-index="1" style="background: lightblue;">Section 2</section>
  <section data-scroll-index="2" style="background: lightgreen;">Section 3</section>

  <script>
    (function () {
      "use strict";
      const settings = {
        upKey: 38,
        downKey: 40,
        easing: "linear",
        scrollTime: 600,
        activeClass: "active",
        onPageChange: null,
        topOffset: 0
      };
      let currentIndex = 0;
      const sections = document.querySelectorAll("[data-scroll-index]");
      const lastIndex = sections.length - 1;
      function scrollTo(index) {
        if (index < 0 || index > lastIndex) return;
        const target = sections[index].offsetTop + settings.topOffset + 1;
        window.scrollTo({
          top: target,
          behavior: "smooth"
        });
      }
      function handleClick(event) {
        const target = event.target.closest("[data-scroll-nav], [data-scroll-goto]");
        if (target) {
          event.preventDefault();
          const index = target.getAttribute("data-scroll-nav") || target.getAttribute("data-scroll-goto");
          scrollTo(parseInt(index));
        }
      }
      function handleKeydown(event) {
        if (document.body.classList.contains("scrolling")) return;
        if (event.keyCode === settings.upKey && currentIndex > 0) {
          scrollTo(currentIndex - 1);
        } else if (event.keyCode === settings.downKey && currentIndex < lastIndex) {
          scrollTo(currentIndex + 1);
        }
      }
      function updateActiveClass() {
        const scrollPosition = window.scrollY;
        let newIndex = 0;
        sections.forEach((section, index) => {
          const sectionTop = section.offsetTop + settings.topOffset;
          const sectionBottom = sectionTop + section.offsetHeight;
          if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
            newIndex = index;
          }
        });
        if (currentIndex !== newIndex) {
          currentIndex = newIndex;
          if (settings.onPageChange) settings.onPageChange(newIndex);
          document.querySelectorAll("[data-scroll-nav]").forEach(nav => nav.classList.remove(settings.activeClass));
          const activeNav = document.querySelector(`[data-scroll-nav="${newIndex}"]`);
          if (activeNav) activeNav.classList.add(settings.activeClass);
        }
      }
      window.addEventListener("scroll", updateActiveClass);
      window.addEventListener("keydown", handleKeydown);
      document.body.addEventListener("click", handleClick);
    })();
  </script>
</body>

</html>
← Back to Directory Edit File 🔒 Chmod