divタグで区切られたページの特定のセクションにジャンプするには？

Question

私がここで達成したいのはかなりシンプルですが、私はその答えを見つけることができません。たぶんそのキーワードの間違った言葉が、それでも私はここで尋ねる。私は、ユーザーがいるすべての特定のページのすべてのコンテンツをリストするナビゲーションバーをWebサイトの右側に持っています。私がしたいのは、リスト内の項目がクリックされると自動的にページ内のセクションにスクロール/スクロールすることです。ここまで私がこれまで持っていたことがあります。私がjqueryで理解していることは限られています。私はあまりにもずっと前にレールを学び始めています。本当にありがとうございます。

私はdivタグにすべてを分けていますし、link_toボタンを用意しています。私は2つの方法をどうやって結ぶのかがはっきりしていない。

あなたはこのような部門にidを追加する必要が

<div class="container"> 
    <div class="row"> 
    <div class="col-md-9 aquascaping-content"> 

     <div class="aquascape-about-intro"> 
     content// 
     </div> 

     <div class="aquascape-about-iwagumi"> 
     content// 
     </div> 

     <div class="aquascape-about-jungle"> 
     content// 
     </div> 

     <div class="aquascape-about-dutch"> 
     content// 
     </div> 

     <div class="aquascape-about-parting"> 
     content// 
     </div> 

    </div> 

    <div class="col-md-3 side-nav"> 
     <h3 class="page-title", style="padding-left: 20px">Quick Navigation</h3> 
     <div class="well well-sm"> 
     <ul class="side-nav-well"> 

      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Intro', "#" %> 
      </b> 
      </li> 
      <hr> 

      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Iwagumi Aquariums', "#" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Jungle Aquariums', "#" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Dutch Aquariums', "#" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Parting Words', "#" %> 
      </b> 
      </li> 
     </ul> 
    </div> 
    </div><!-- end of quick navigation --> 
    </div> 
</div><!-- /.container-fluid --> 

Answer 1

：

<div class="aquascape-about-intro" id="intro"> 

と、このような hrefとして、リンクにこの idを追加します。これはに変換される

<%= link_to "Intro", "#intro" %> 

：

<a href="#intro">Intro</a> 
<!-- Clicking on this would directly take you to the div with id intro --> 

以下のように、すべてのdivでこれを行います。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-9 aquascaping-content"> 

     <div class="aquascape-about-intro" id="intro"> 
     content// 
     </div> 

     <div class="aquascape-about-iwagumi" id="about"> 
     content// 
     </div> 

     <div class="aquascape-about-jungle" id="jungle"> 
     content// 
     </div> 

     <div class="aquascape-about-dutch" id="dutch"> 
     content// 
     </div> 

     <div class="aquascape-about-parting" id="parting"> 
     content// 
     </div> 

    </div> 

    <div class="col-md-3 side-nav"> 
     <h3 class="page-title", style="padding-left: 20px">Quick Navigation</h3> 
     <div class="well well-sm"> 
     <ul class="side-nav-well"> 

      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Intro', "#intro" %> 
      </b> 
      </li> 
      <hr> 

      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Iwagumi Aquariums', "#about" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Jungle Aquariums', "#jungle" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Dutch Aquariums', "#dutch" %> 
      </b> 
      </li> 
      <hr> 
      <li class="side-nav-item"> 
      <b> 
       <%= image_tag("arrow-icon.png", size: "30x30", alt: "Aquascaping image", class: "side-nav-img")%> 
       <%= link_to 'Parting Words', "#parting" %> 
      </b> 
      </li> 
     </ul> 
    </div> 
    </div><!-- end of quick navigation --> 
    </div> 
</div><!-- /.container-fluid -->