为什么页面锚点在 Ruby On Rails 中不起作用?

2024-04-28

因此,我的链接具有用于加载 ajax 的 href 值和用于链接到页面顶部的 onclick 值。当我单击链接时,ajax 内容都会加载,并且 url 会显示对锚点的引用,但页面不会移动到锚点。

我已经尝试过锚点show.html.erb and index.html.erb当我滚动到顶部时,它会直观地显示它们应该用于测试的位置,但页面不会移动到该位置。有什么想法可能导致这种情况吗?

show.html.erb and index.html.erb

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

单击后,浏览器中的 url 会发生以下情况:

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

然而,内容加载并且页面仅轻微跳转以适应新内容,但不会移动锚点。

任何想法将不胜感激!

Thanks


您使用该属性href指向另一个锚点(可以由name or id属性。

例如:

<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代替name像这样...

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

...

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

了解更多相关信息here http://www.tagindex.net/html/link/a_name.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么页面锚点在 Ruby On Rails 中不起作用? 的相关文章

  • 如何将js文件从同一文件夹导入chrome扩展中的background.js

    我在导入与 background js 脚本库 位于同一库中的文件 score js 时遇到问题 我对 js 和 chrome 扩展都很陌生 我研究了 require js 并做了这个 背景 html h1 Tab Manager h1
  • 在模态上自动滚动引导模态('show')

    我有一个用于评论的引导模式 评论表格附加在评论列表的底部 我希望此模式在打开时滚动到列表底部 如果有超过 2 或 3 条评论 我已经安装了这个幻灯片插件 http jesseprice com jquery slide to plugin
  • webpack 加载器并包含

    我是 webpack 的新手 我正在尝试了解加载器及其属性 例如测试 加载器 包含等 这是我在 google 中找到的 webpack config js 的示例片段 module loaders test js loader babel
  • 红宝石和纱线

    I have an error with my RoR project when I try to start it using Run shift f10 但是当我使用启动服务器时rails s在控制台中 它有效 Your Yarn pa
  • 从 json 文件加入时添加角色 (autorole)

    我对 JS 相当陌生 为了学习 我决定为 Discord 制作一个机器人 我学到了很多并且正在继续学习 我有一个 autorole 的想法 我知道传统的做法 bot on guildMemberAdd member gt var role
  • Javascript 3d 绘图实用程序? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道有什么好的 javascript 3d 绘图实用程序吗 我知道每个网站都推荐过画布 3d 图
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • 将文本数据作为表单中的文件发布

    是否可以从 html 表单中发布一些作为文件输入类型的字符串的 XML 数据 情况是我有一个像这样的表格 form action target php method post enctype multipart form data gt
  • 如何使用 javascript 禁用组合键?

    I would like to disable view source shortcut key for IE using JavaScript To disable Ctrl C I am using the following func
  • AngularJS 中的嵌套模块

    我有 2 个不同的 AngularJs 模块 一个 widgetContainer 和一个 widget 小部件可以显示为独立的应用程序 也可以包含在小部件容器中 一个 widgetContainer 包含 0 N 个 widget 如果我
  • NodeJS 错误堆栈未定义 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在使用节点检查器 我注意到new Error 有未定义的堆栈 如果我将此值分配给一个变量 该变量将显示堆栈未定义 有趣的是 跑步new
  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • 出于安全目的,您是否有理由不执行自己的算法来打乱 ID?

    我计划实现我自己的非常简单的 哈希 公式 为具有多个用户的应用程序添加一层安全性 我目前的计划如下 用户创建一个帐户 此时后端会生成一个 ID ID 通过公式运行 假设 ID 57 8926 36 7 或同样随机的东西 然后 我将新的用户
  • 有没有办法将样式强制应用到已经具有 style="" 属性的 div 元素

    我正在尝试对我无法控制的 HTML 输出进行皮肤处理 其中一个元素是div with a style overflow auto 属性 CSS 有没有办法强制这样做div to use overflow hidden 你可以加 import
  • jQuery 倒计时插件 - 只显示非零周期

    我正在使用 jQuery 倒计时插件编写倒计时 我只希望它显示活动 非零 周期 例如代替 剩余时间 0 天 0 小时 13 分 20 秒 它应该只显示 13 分 20 秒 我的代码是 countdown countdown expiryUr
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto
  • ReactJS setState 仅在嵌套在 setState 中时才有效

    问题 当我使用 this setState 并在回调中输出状态时 它根本不会改变 但是当我将 setstate 嵌套在 setstate 中时 它将正常工作 例子 这不行 this setState data newData 这确实有效 t
  • Elastic Beanstalk、Bundler 找不到 gem“bundler”的兼容版本

    我已经尝试过将 Elastic Beanstalk 用于 Rails 当我运行 eb deploy 时出现此错误 我需要至少安装bundler 1 8 4 知道如何解决这个问题吗 Bundler could not find compati
  • 在哪里放置资源特定逻辑

    您能帮我考虑在 AngularJS 中将资源 服务 特定的业务逻辑放置在哪里吗 我觉得在我的资源上创建一些类似模型的抽象应该很棒 但我不确定如何做 API调用 gt GET customers 1 lt first name John la

随机推荐