Как перейти к определенному разделу на странице, разделенной тегами div?

Question

Так что я хочу достичь здесь довольно просто, но я не могу найти ответ на него. Возможно, это неправильный термин для ключевых слов, но, тем не менее, я здесь спрашиваю. У меня есть панель навигации справа от моего веб-сайта, в которой перечислены все содержимое каждой конкретной страницы, на которой находится пользователь. То, что я хочу сделать, это «прыгать»/прокручивать до раздела на странице автоматически, когда нажимаются элементы в списке. Вот что я до сих пор. Я не уверен, с чего начать или начать, мое понимание в jquery также ограничено. Я начал изучать рельсы не так давно, и я был бы очень признателен за некоторые рекомендации.

У меня есть все разделенные на 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

Вам нужно добавить идентификаторы к разделам, как это:

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