Get started with onepage-scroll CDN

Attribution-ShareAlike 4.0 International licensed

Onepage-scroll is a library that enables seamless single-page website navigation with offset-based scrolling and page component visibility.

Tags:
  • onepage-scroll
  • one_page
  • jquery
  • Apple-like
  • keyboard

Stable version

Copied!

How to start using onepage-scroll CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with onepage-scroll CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>
</head>
<body>
    <nav>
        <ul class="menu">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <div id="wrapper">
        <section id="home" class="section">
            <h1>Welcome to Onepage Scroll Example</h1>
            <p>Scroll down to explore the sections.</p>
        </section>

        <section id="services" class="section">
            <h2>Services</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut lacus id mauris venenatis malesuada.</p>
        </section>

        <section id="about" class="section">
            <h2>About Us</h2>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </section>

        <section id="contact" class="section">
            <h2>Contact</h2>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a href="#" class="button">Contact Us</a>
        </section>
    </div>

    <script src="scripts.js"></script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions