Unexpected result in Javascript event/rails app

Question

I have strange bug in JS code. After I translate page to another language by clicking "English | Русский" with simple I18n translate my menu buttons are not working until I reload the page. I think reason - is JS code that responsible for menu scrolling. But I can't understand true reason.

<!-- start-smoth-scrolling-->
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".scroll").click(function(event){   
        event.preventDefault();
    
    $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
      });
    });
</script>
<!--//end-smoth-scrolling-->

     

<!--banner-->
      <div  id="home" class="banner">
        <div class="banner-info">
          <div class="banner-top">
            <div class="container">
              <div class="col-md-6 banner-top-left wow slideInDown animated" data-wow-delay=".5s">
                <ul class="social-icons">
                  <li><a href="#"> </a></li>
                  <li><a href="#" class="fb"> </a></li>
                  <li><a href="#" class="in"> </a></li>
                  <li><a href="#" class="dott"> </a></li>
                </ul>
              </div>
              <div class="col-md-6 banner-top-right wow slideInDown animated" data-wow-delay=".5s">
                <p><span class="glyphicon glyphicon-earphone"></span> +7 978 887 34 61 </p>
                <p><%= link_to_unless_current "English", locale: "en" %> | <%= link_to_unless_current "Русский", locale: "ru" %></p>
              </div>
              <div class="clearfix"> </div>
            </div>
          </div>
          <div class="banner-text">
            <h1 class="wow slideInLeft animated" data-wow-delay=".5s"><%= t "banner.title" %></h1>
            <p class="wow slideInRight animated" data-wow-delay=".5s"><%= t "banner.description" %></p>
          </div>
          <!--navigation-->
          <div class="top-nav wow">
            <div class="container">
              <div class="navbar-header logo">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><%= t "navigation.menu" %>
                </button>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div class="menu">
                  <ul class="nav navbar">
                    <li class="menu-item menu-item-current"><a href="#home" class="menu-link scroll"><%= t "navigation.home" %></a></li>
                    <li class="menu-item"><a href="#about" class="menu-link scroll"><%= t "navigation.about" %></a></li>
                    <li class="menu-item"><a href="#services" class="menu-link scroll"><%= t "navigation.services" %></a></li>
                    <li class="menu-item"><a href="#work" class="menu-link scroll"><%= t "navigation.works" %></a></li>
                    <li class="menu-item"><a href="#gallery" class="menu-link scroll"><%= t "navigation.gallery" %></a></li>
                    <li class="menu-item"><a href="#contact" class="menu-link scroll"><%= t "navigation.contact" %></a></li>
                  </ul>
                </div>
                <div class="clearfix"> </div>
                <script>
                  (function() {
                    [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
                      var menuItems = menu.querySelectorAll('.menu-link'),
                        setCurrent = function(ev) {
                          ev.preventDefault();
    
                          var item = ev.target.parentNode; // li
                          
                          // return if already current
                          if( classie.has(item, 'menu-item-current') ) {
                            return false;
                          }
                          // remove current
                          classie.remove(menu.querySelector('.menu-item-current'), 'menu-item-current');
                          // set current
                          classie.add(item, 'menu-item-current');
                        };
                      
                      [].slice.call(menuItems).forEach(function(el) {
                        el.addEventListener('click', setCurrent);
                      });
                    });
                  })(window);
                </script>
              </div>
              <!-- script-for sticky-nav -->
              <script>
              $(document).ready(function() {
                 var navoffeset=$(".top-nav").offset().top;
                 $(window).scroll(function(){
                  var scrollpos=$(window).scrollTop(); 
                  if(scrollpos >=navoffeset){
                    $(".top-nav").addClass("fixed");
                  }else{
                    $(".top-nav").removeClass("fixed");
                  }
                 });
                 
              });
              </script>
              <!-- /script-for sticky-nav -->
            </div>
          </div>  
          <!--//navigation-->
        </div>
      </div>
      <!--//banner-->

Answer 1

I found the solution in this question JQuery gets loaded only on page refresh in Rails 4 application The issue was in turbolinks assets. JS works only when I reload the page. Thanks to Ian and his answer.

remove //= require turbolinks from assets/javascripts/application.js file:

add gem 'jquery-turbolinks' in your gemfile

and this to your assets/javascripts/application.js file:

//= require jquery.turbolinks