加载带有剔除后的网址中的锚标记

Question

我正在工作一个剔除页面，并且有一个项目列表。 对于每个项目，我需要它们具有一个锚标签来滚动到。 我遇到的问题是，锚定标签是从敲除绑定中加载的，因此，当您从外部页面单击url时，实际上滚动到该项目会遇到问题。 带有哈希的页面是一个单独的页面。 因此，您无法滚动浏览页面加载时的哈希值，仅仅是因为直到敲除加载到绑定中才存在哈希值。

例如...

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

它应该使用锚标记链接到page1，例如...

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

问题在于该名称在敲除绑定之后添加。 我希望在不使用JavaScript的情况下执行此操作，而不检查是否有ID可以链接并更改window.location，但是，如果这是我唯一的选择，那么我会做。 有谁对这个问题有更优雅的解决方案？

Answer 1

如果用例足够简单，则可以在KO初始化之后简单地检查目标onload，然后将用户发送到那里。 使用类似scrollIntoView的方法应该可以工作：

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

（未经测试，调整语法错误等！）

Answer 2

我放在一起的这个例子很好用：

https://jsfiddle.net/915jss01/1/

加载后，需要使用attr数据绑定来设置锚定目标：

<a data-bind="attr: {href: '#' + $data}, text: $data"></a>

然后类似地设置目标锚名称：

<a data-bind="attr: {name: $data}, text: $data"></a>

Answer 3

您所要做的就是在设置完页面后重新设置window.location.hash ，它将在此处滚动。 您必须在重新分配它之前清除它的值，以使它将分配识别为更改。

我设置了一个时间延迟，因为设置速度足够快，哈希的初始设置“有效”了。

 window.location.hash = '#3'; // because I'm in a snippet var vm = { divs: ko.observableArray([{ id: '1', classname: 'green' }, { id: '2', classname: 'blue' }, { id: '3', classname: 'red' }]), hashchange: ko.observable(false) }; setTimeout(function() { ko.applyBindings(vm); var hash = window.location.hash; window.location.hash = ''; window.location.hash = hash; }, 100); 

 div { min-height: 500px; } .green { background-color: green; } .blue { background-color: blue; } .red { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: divs"> <div data-bind="attr: {id: id}, css: classname, text: id"> </div> </div>