如何跳转到由 div 标签分隔的页面中的特定部分

Question

所以我在这里想要实现的目标非常简单，但我似乎找不到答案。也许这是一个错误的关键字术语，但我在这里问。我的网站右侧有一个导航栏，其中列出了用户所在的每个特定页面中的所有内容。我想做的是在单击列表中的项目时自动"跳转"/滚动到页面中的部分。这是我到目前为止所拥有的。我不知道从哪里开始或开始，我对jquery的理解也很有限。不久前我开始学习rails，我真的很感激一些指导。

我将所有内容都分成div 标签，并且准备好link_to按钮。我只是不太确定如何将两者联系起来。

<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

您需要像

这样将 id 添加到分区中：

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

然后在链接中添加此id，如下所示href：

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