[英]How to jump to specific section in a page separated by div tags?
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. 我不确定从哪里开始或开始,我对jquery的理解也很有限。 I have started learning rails not too long ago and I would really appreciate some guidance. 我不久前才开始学习Rails,我真的很感谢一些指导。
I have everything separated into div tags and I have link_to buttons ready to go. 我将所有内容都分为div标签,并且可以使用link_to按钮。 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 -->
You need to add id's to the divisions like this: 您需要像这样向分区添加id:
<div class="aquascape-about-intro" id="intro">
and then in the link add this id
as href
like this: 然后在链接中将此id
添加为href
如下所示:
<%= 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执行此操作。
<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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.