How to jump to specific section in a page separated by div tags?

Question

So what I want to achieve here is quite simple but I cant seem to find the answer for it. Maybe its a wrong term for keywords but nevertheless Im here asking. I have a navigation bar to the right of my website that lists all the content in the every particular page the user is on. What I want to do is "jump" / scroll to the section in the page automatically when the items in the list are clicked upon. Here is what I have so far. Im not sure where to start or begin, my understanding in jquery is also limited. I have started learning rails not too long ago and I would really appreciate some guidance.

I have everything separated into div tags and I have link_to buttons ready to go. Im just not quite sure how to connect the two.

<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

You need to add id's to the divisions like this:

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

and then in the link add this id as href like this:

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

This gets converted to:

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

Do this for all div's as shown below.

<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 -->