从不包含该元素 id 的链接和不同页面上跳转到该元素答案

【问题标题】：Jump to an element from a link not containing that element's id and on a different page从不包含该元素 id 的链接和不同页面上跳转到该元素
【发布时间】：2017-01-08 04:04:37
【问题描述】：

必备知识：

在我网站的页脚中，有一些链接将用户重定向到网站的公司页面，例如 www.example.com/company.html#first 。

单击此链接将触发默认浏览器行为，即它将重定向到 www.example.com/company.html#first 并显示 id = "first" 的 div。

但是在我的 company.html 的 dom 中，没有 id = "first" 的 div（我有我的原因，因为我无法将 id 提供给相关的 div，但这是一个单独的问题）。此外，我在某些功能中使用了 url 的哈希，因此我必须将其保留为 #first。

问题：

所以，我的问题是我是否可以将不同的 div 带入视图 - div 的父元素（有一个 id 可用）我未能提供上面提到的 id页脚链接的点击。也欢迎提出建议！

【问题讨论】：

如果 DOM 中没有 ID，如何找到 div 的父级？
@BramVanroy 对不起，应该提到父 div 的 id（比如 div#parent）实际上是可用的。但是这个 div#parent 中有多个列表项，其中一个应该有 id #first 但这不可用。我在页脚中有多个链接指向这些列表项；所以我不能简单地针对单个列表项。
您是否提前知道id 的替代方案是什么，如果是这样，您可以使用{ 'first' : 'alternativeToFirst' } 形式的映射，并使用它滚动到适当的元素，而无需更改网址。

标签： javascript jquery html

【解决方案1】：

既然你表明你可以访问 jQuery，你可以写一个脚本来改变它们，就像

var link1 = $('a[href="http://www.example.com/company.html#first"]');
$(link1).attr('href','http://www.example.com/company.html#mydiv');

这样您将更改您真正希望它指向的网址。您将为它们中的每一个执行类似的操作。

【讨论】：

感谢您的建议，但我必须保留 href 属性的原始值。

【解决方案2】：

感兴趣的可能是在页脚中为链接提供作为data-* 属性呈现的后备URL。例如

<a href="www.example.com/company.html#first" data-fallback="www.example.com/company.html#first-parent" title="First">First</a>

在 jQuery 中你可以做这样的事情（未经测试）：

$("a").click(function(e) {
  if (window.location.hash) {
    // Don't follow the link initially
    e.preventDefault();

    var url = this.href,
      // Borrowed from: http://stackoverflow.com/a/4426201/1150683
      el = $(url.substring(url.indexOf('#') + 1));

    // If element exists
    if (el.length > 0) {
      window.location.href = url;
    } else {
      window.location.href = $(this).data("fallback");
    }
  }
});

【讨论】：

数据回退看起来是一种非常好的前进方式，但这不会解决我的问题，因为条件el.length > 0 将始终适用于我的场景。无论如何，谢谢，现在我至少可以优化我的代码了:)
那么是什么决定了是否应该遵循原始锚点？如果我点击一个链接，它有一个哈希 - 什么时候应该关注它，什么时候不应该关注它？
遵循原始锚点，因为我没有阻止默认点击操作 - 点击页脚链接 a[href="/company.html#first"] 将我们带到 company.html 但由于无法找到 #first，页面顶部已显示。

【解决方案3】：

所以我确实解决了我自己的问题，但只是通过对可用的 url 哈希进行硬编码。这有点脏，每个页面都会调用脚本，但我认为这就是我现在要使用的。我像这样使用 $(document).ready()：

$(document).ready(function() {
if (location.pathname.split('/')[1] === 'company.html' && $.inArray(location.hash.split('#')[1], ['first', 'second', 'third']) > -1) {
  $('#parent').get(0).scrollIntoView();
}
});

【讨论】：