jquery-smooth-scroll-rails無法正常工作

Question

我試圖執行smooth scroll。我試着用這個gem來安裝它。它不工作，我不明白爲什麼。我是否正確安裝？我是否正確實施了它？我的猜測是它沒有正確安裝。

編輯：要安裝它，我將gem "jquery-smooth-scroll-rails", "~> 0.0.3"添加到我的Gemfile中，運行gem install jquery-smooth-scroll-rails，然後bundle install。

Gemfile

group :assets do 
    gem 'sass-rails', '~> 3.2.3' 
    gem 'coffee-rails', '~> 3.2.1' 
    gem 'asset_sync' 
    gem 'fontello-rails' 
    gem "jquery-smooth-scroll-rails", "~> 0.0.3" 

    # See https://github.com/sstephenson/execjs#readme for more supported runtimes 
    # gem 'therubyracer', :platforms => :ruby 

    gem 'uglifier', '>= 1.0.3' 
end 

這是我的代碼：

home.html.erb

<% provide(:title, 'Questions About College? CollegeANSWERZ') %> 

<div id="home_css"> 

<h1 id="top">Better College Reviews <span class="icon-ok"></span></h1> 
<h1>Information You Want <span class="icon-ok"></span></h1> 
<h1>Good Advice <span class="icon-ok"></span></h1> 
<h1 id="collegeanswerz">Collegeanswerz.</h1> 

<%= image_tag("pitt.png", size: "336x440", id: "picture") %> 

<div id="bottom"> 
<div id="nav"> 
    <ul> 
     <li id="why_its_better" class="nav_element">Why it's Better</li> 
     <li></li> 
     <li id="how_it_works" class="nav_element">How it Works</li> 
     <li></li> 
     <li id="our_philosophy" class="nav_element">Our Philosophy</li> 
     <li></li> 
     <li id="about_me" class="nav_element">About Me</li> 
    </ul> 
</div> 

<div id="details" class="well"> 
    <section id="why_its_better_section"> 
     <h2 class="well">Why it's Better </h2> 

     <h3>BETTER COLLEGE REVIEWS</h3> 
     <p>As a college applicant, there are a lot of specific things that you want to know.</p>  </section> 

    <section id="how_it_works_section"> 
     <h2 class="well">How It Works</h2> 

     <p>Answering Questions - how answering questions works</p> 
     <ul> 
      <li>There's about 60 questions per school. Each question takes about a minute or two to answer. Whatever you have time for and feel comfortable with is much appreciated!</li> 

    </section> 

    <section id="about_me_section"> 
     <h2 class="well">About Me</h2> 
    </section> 

</div> 
</div> 


</div> 

home.js

$(document).ready(function(){ 
     $("#contact").click(function() { 
      $("#top_area").hide("fast"); 
      $(".idea_bar").show("fast"); 
     }); 
     $("#close").click(function() { 
      $(".idea_bar").hide("fast"); 
      $("#top_area").show("fast"); 
     }); 

     $("#why_its_better_section, #how_it_works_section, #our_philosophy_section, #about_me_section").hide(); 
     $("#why_its_better").click(function() { 
      $("#how_it_works_section, #our_philosophy_section, #about_me_section").hide(); 
      $("#why_its_better_section").show(); 
      $("#details").smoothScroll(); 
     }); 
     $("#how_it_works").click(function() { 
      $("#why_its_better_section, #our_philosophy_section, #about_me_section").hide(); 
      $("#how_it_works_section").show(); 
      $("#details").smoothScroll(); 
     }); 
     $("#our_philosophy").click(function() { 
      $("#why_its_better_section, #how_it_works_section, #about_me_section").hide(); 
      $("#our_philosophy_section").show(); 
      $("#details").smoothScroll(); 
     }); 
     $("#about_me").click(function() { 
      $("#why_its_better_section, #how_it_works_section, #our_philosophy_section").hide(); 
      $("#about_me_section").show(); 
      $("#details").smoothScroll(); 
     }); 

     $("#search_field").autocomplete({ 
      source: [ 
      "Adelphi University", 
      "American University", 
      "Wofford" ] 
     }); 
     $("#search_text").submit(function() { 
      if ($("#search_field").val() == "Adelphi University") 
      { 
       window.location.href = "/adelphi-university"; 
       return false; 
      } 
     }); 


}); 

Answer 1

你可能忘了JavaScript庫添加到您的application.js

添加以下兩將它們包括：

//= require jquery.easing 
//= require jquery.smoothScroll