为什么不页锚工作的Ruby on Rails的? [英] Why Doesn't Page Anchor Work in Ruby On Rails?

查看:108
本文介绍了为什么不页锚工作的Ruby on Rails的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我必须具有href值加载Ajax和一个onclick值链接到页面顶部的链接。当我点击的链接都AJAX中加载内容和URL显示参考锚,但页面不移动锚点。

So I have links that have an href value to load ajax and an onclick value to link to the top of the page. When I click the links both the ajax content loads and the url show a reference to the anchor, but the page doesn't move to the anchor.

我试图在这两个 show.html.erb index.html.erb 直观地锚出现,他们应该是测试当我滚动到顶部,但页面不会移到该位置。任何想法可能会导致什么呢?

I've tried anchors in both the show.html.erb and index.html.erb which visually show up where they should be for test when I scroll to the top, but the page doesn't move to that location. Any ideas what could be causing this?

show.html.erb index.html.erb

<a name="#posts_top">love and kittens</a>

在单击下面的视觉发生了网址在浏览器:

On click the following happens visually to the url in the browser:

http://localhost:3000 => http://localhost:3000/#posts_top

然而,加载内容和页面跳转只略微以适应新的内容,但不移动锚

Yet, the content loads and the page only jumps slightly to accommodate for the new content, but doesn't move the the anchor.

任何想法,将大大AP preciated!

Any thoughts would be greatly appreciated!

感谢

推荐答案

您使用属性的href 指向另一个锚(可以定义或者由名称 ID 属性。

You use the attribute href to point to another anchor (which may defined either by the name or id attribute.

例如:

<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="#a001">Jump to a001</a></li>
<li><a href="#a002">Jump to a002</a></li>
<li><a href="#a003">Jump to a003</a></li>
</ul>

<h3><a name="a001">a001</a></h3>
<p>paragraph text ...</p>

<h3><a name="a002">a002</a></h3>
<p>paragraph text ...</p>

<h3><a name="a003">a003</a></h3>
<p>paragraph text ...</p>

<hr>

<p><a href="#menu">Jump to Menu</a></p>

要注意,你也可以使用 ID 而不是名称像这样...

To note, you can also use id instead of name like so...

<a href="#a001">Jump to a001</a>

...

<h3 id="a001">a001</h3>

了解更多关于它这里

这篇关于为什么不页锚工作的Ruby on Rails的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆