html - JQuery smooth scroll doesn't work in practice -

i have problem smooth scrolling self-included jquery function want obtain, simple smooth scroll effect

// global js  (function($){      var $body,        $window,        settings = {          duration: 3000        };      // smooth scrolling    function smoothscrool (event) {      var $this = $(this),          href = $this.attr('href'),          $target = $(href);            if ($target.length > 0) {                        event.preventdefault();              $body.animate({              scrolltop: $target.offset().top            }, settings.duration);          }    }      function bindings (){        // smooth scroll function      $('a[href^="#"]').on('click', smoothscrool);      }      $(document).ready(function(){      // variabili      $body = $('html, body');      $window = $(window);        bindings();    });    })(jquery);

.long {    height: 2000px;    width: 300px;    background-color: pink;    }    .red {    color: red;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <a href="#hello">this goes hello</a>  <a href="#hello" class="red">this red , goes hello</a>  <div class="long"></div>  <div id="hello" class="prova"> here hello </div>

for reason can't have here. can please explain me missed please, syntax of links same added classes , sections think shouldn't bother script.

thank you