Comment utiliser Scroll

Bonjour, je constate que lorsque le

scroll

est utilisé et que je clique sur un menu je vois dans l'url par exemple: index.html#accueil . ou bien index.html#service

Ma question est comment utiliser le scroll pour que quelque soit le menu du navigateur que je clique sur la meme page j'obtiens ce résultat :****index.html

Voici le code de menu de naviguation

<header>
        <nav class="navbar navbar-fixed-top">
            <div class="navbar-top bg-grey fix">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="navbar-callus text-left sm-text-center">
                                <ul class="list-inline">
                                    <li><i class="fa fa-phone"></i> Call us: 1234 5678 90</li>
                                    <li><i class="fa fa-envelope-o"></i> Contact us: your@email.com</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="navbar-socail text-right sm-text-center">
                                <ul class="list-inline">
                                    <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                    <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href=""><i class="fa fa-behance"></i></a></li>
                                    <li><a href=""><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container sm-header">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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="index.html">Mille Couleurs</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#accueil">Accueil</a></li>
                        <li><a href="#service">Service</a></li>
                        <li><a href="#galery">Galerie</a></li>
                        <li><a href="#plan">Plan</a></li>
                        <li><a href="#equipe">Equipe</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
    </header>

et le code javascript :

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