1

我正在尝试实现平滑滚动。我尝试使用这个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;
            }
        });


});
4

1 回答 1

-1

您可能忘记将 javascript 库添加到您的application.js

添加以下两个以包含它们：

//= require jquery.easing
//= require jquery.smoothScroll
于 2013-10-17T10:44:24.787 回答