ScrollToNavigation

Scroll to Navigation without Hashtag in URL

by Dhruvang Gajjar

HTML

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">
  <h2>Home</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis,
    vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum
    lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis
    ut, ullamcorper quis nulla.</p>
</div>

<div id="about">
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis,
    vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum
    lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis
    ut, ullamcorper quis nulla.</p>
</div>

<div id="services">
  <h2>Services</h2>
  <p>Lorem ipsum dolor sit amet,...

CSS

body {
  color: #444;
  font-size: 1.2em;
}

.container {
  width: 900px;
  margin: 30px auto;
  padding: 25px;
  min-height: 400px;
  height: auto;
}

.container h2 {
  margin-top: 30px;
}

.nav {
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline;
  margin: 0 20px;
}

JavaScript

$(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var target = this.hash,
      $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function() {
      window.location.hash = target;
      window.history.pushState(null, null, "nav.html");
    });
  });
});