Minimal One Page Scroll Mockup With jQuery - smooth-scrolling

A minimal one page scrolling website boilerplate with support for scrollspy, smooth scrolling animation and sticky header navigation. Made with HTML, CSS and a little bit of jQuery.

How to use it:

1. Create your own sectioned content as this:

<div id="container">
  <div id="about" class="box">
    About 
  </div>
  <div id="work" class="box">
    Work
  </div>
  <div id="clients" class="box">
    Clients
  </div>
  <div id="blogs" class="box">
    Blogs
  </div>
  <div id="contact" class="box">
    Contact
  </div>
</div>

2. Create a sticky navigation for the one page scrolling website.

<nav class="navigation">
  <a class="active" href="#about" title="About">About</a>
  <a href="#work" title="Work">Work</a>
  <a href="#clients" title="Clients">Clients</a>
  <a href="#blogs" title="Blogs">Blogs</a>
  <a href="#contact" title="Contact">Contact</a>
</nav>

3. Style & position the navigation:

.navigation {
  top: 0;
  left: 0;
  padding: 0 10%;
  width: 100%;
  position: fixed;
  color: #fff;
  box-sizing: border-box;
  background: #363636;
  text-align: center;
}

.navigation a {
  color: inherit;
  margin: 35px 5px;
  line-height: 150%;
  padding: 0 5px 0 20px;
  display: inline-block;
  text-decoration: none;
  border-left: 1px solid #fff;
}

.navigation a.active { color: yellow; }

.navigation a:first-child { border: 0; }

4. Make the content sections full page.

.box {
  width: 100vw;
  height: 100vh;
  font-size: 14vw;
  padding-top: 100px;
  text-align: center;
}

5. Place the needed jQuery library at the end of the document.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>

6. Active the smooth scroll and scroll spy functionalities.

jQuery('.navigation a').on( 'click', function(event) {
  var target  = jQuery( this );
  var element = target.attr('href');

  jQuery('.navigation a').removeClass('active')
  target.addClass('active');

  jQuery("body, html").animate({ 
    scrollTop: jQuery( element ).offset().top - 90  
  }, 800);
});

---

This awesome jQuery plugin is developed by codeessentials. For more Advanced Usages, please check the demo page or visit the official website.