javascript - 加载后在 url 中使用 anchor 标记

标签 javascript jquery html knockout.js

我正在制作一个 knockout 页面,并且我有一个项目列表。对于每个项目,我需要他们有一个 anchor 标签来滚动。我遇到的问题是 anchor 标记是从 knockout 绑定(bind)加载的,因此,当您从外部页面单击 url 时,您会遇到实际滚动到该项目的问题。带有散列的页面是一个单独的页面。因此,您无法滚动到页面加载时的散列,因为它在 knockout 加载绑定(bind)之前不存在。

例如……

我的网址 = mysite.com/page1#thisItem

它应该链接到带有 anchor 标记的 page1,例如...

<a name="thisItem"></a>

问题是在 knockout 绑定(bind)之后添加了名称。我更愿意在没有 javascript 检查它是否有链接到和更改 window.location 的 id 的情况下执行此操作,但是如果这是我唯一的选择,那么我会这样做。有没有人对这个问题有更优雅的解决方案?

最佳答案

如果您的用例足够简单,您可以在 KO 初始化后简单地检查目标加载,然后将用户发送到那里。使用类似 scrollIntoView 的东西应该工作:

if (location.hash) {
    document.scrollIntoView(document.getElementByName(location.hash)[0]);
}

(未测试,针对语法错误等进行调整!)

关于javascript - 加载后在 url 中使用 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34729745/

相关文章:

javascript - 在 React.js 应用程序中从广告合作伙伴加载外部脚本

javascript - iframe.src 属性中的 "javascript:"、 "#"和 "javascript:false"有什么区别

javascript - 如何循环每个可能的十六进制数字 (00 - FF)

Jquery:如何识别元素的类

jquery - 使用 jQuery 编辑表单时确认离开页面

javascript - 无法点击 anchor 链接

javascript - 使用 jVectormap 世界地图获取国家/地区名称

javascript - PHP base64_decode 未将 base64 字符串转换为真正可用的图像文件

javascript - 使用纬度和经度在 map 上放置位置时如何使用 ZoomToMapObject

jquery - 使用 CSS 悬停时图像缩放