railsでアーニメション効果でスクロールするjqueryを使ってますが、
一回目のjqueryを動くものの２回目以降からは動きません。

発生する手順

⑴localhost.comにアクセス
↓
⑵profileというボタンをクリック
↓
⑶
URLがloalhost.com#profileになって
jqueryによってアニメーション効果を持ってスクロールされる
↓
⑷これ以降からtopボタンを押してもjqueryは効かない

develop toolで見ると手順の三番目の時点で該当ボタンのclick event listnerに私が書いたjqueryが消えてしまいます。

原因がわからずこちらに質問させていただきます。何か原因特定できる情報がありましたらご教示いただけますでしょうか。
自分の設定は以下の通りです。

/app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .

/app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Progate School</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

html code

    <header> 
      <div class="container">
        <div class="header__title">
          <a class="header__logo" href="#top">top</a>
        </div>
        <div class="header__menu">
          <ul class="header__menu__right">
            <li>
              <a href="#profile">profile</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

jqeury

$(function(){
  // header navigation
  $('header a').click(function(){
    var id = $(this).attr('href');
    var top = $(id).offset().top;
    $('html body').animate({ scrollTop: top }, 500);
  });
});