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!