jQuery scroll from navbar

by Johan Preynat

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#1" class="scroll">1</a>
                </li>
                <li><a href="#2" class="scroll">2</a>
                </li>
                <li><a href="#3" class="scroll">3</a>
                </li>
                <li><a href="#4" class="scroll">4</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- header -->
<div class="row sections">
    <div class="container"> <a name="1"></a>

        <div class="col-lg-12">
                <h1>Div 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed justo condimentum, auctor augue ut, egestas elit. Nunc lacus sem, adipiscing non lobortis id, porttitor vel tellus. Cras non libero nec nibh eleifend pellentesque. Sed laoreet ipsum libero, vel facilisis quam luctus eget. In et libero ac lorem blandit interdum non et lorem. Curabitur ac sodales turpis. Nam velit tortor,...

JavaScript

$(function () {
    $("a.scroll").click(function (e) {
        if (this.hash) {
          
            //get rid of hash
            var hash = this.hash.substr(1);

            console.log(hash);
            //get the position of the <a name> 
            var $toElement = $("a[name=" + hash + "]");
            var toPosition = $toElement.offset().top;

            console.log(toPosition);
            //scroll/animate that element
            $("body,html").animate({

                scrollTop: toPosition

            }, 500, "easeOutExpo");

            //don't do the jump
            return false;
        }
    });

    if (location.hash) {
        var hash = location.hash;
        window.scroll(0, 0);
        $("a[href=" + hash + "]").click();
    }
});