jquery scroll

jquery scroll

I'm trying to make my page scroll down to a specific part in the page. For example if I click on heading 3 then it must scroll down to heading 3.

The problem I'm having is that my other anchor tags don't work

Here is my html
  1. <div class="nav-wrapper">
                            <div class="nav">
                            <ul>
                                <li>
                                    <a href="#heading1">HEADING 1</a>
                                </li>
                                <li>
                                    <a href="#heading2">HEADING 2</a>
                                </li>
                                <li>
                                    <a href="#heading3">HEADING 3</a>
                                </li>
                                <li>
                                    <a class="active" href="#heading4">HEADING 4</a>
                                </li>
                            </ul>
                            </div>















  2. <div class="heading1">Heading 1</div>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>
  4. <div class="heading2">Heading 2</div>
  5. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>
  6. <div class="heading3">Heading 3</div>
  7. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>
  8. <div class="heading4">Heading 4</div>
  9. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ultrices adipiscing. Nunc suscipit ultrices est, vel pharetra metus. Maecenas condimentum metus vitae metus rutrum vehicula. Morbi porttitor consequat tincidunt. Aliquam elementum ac nisi vel blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus egestas purus sed euismod. Vivamus vel nisl in ante venenatis porttitor. Mauris at egestas tortor.</p>

and my jquery

  1. $('a').on('click', function (e) {
        e.preventDefault();
        var target = this.hash,
            $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1600, 'swing', function () {
            window.location.hash = target;
        });
    });