Question

我有一个由州组织的长篇页面。我在页面顶部有一个Select2元素，我想用它来让访问者选择一个状态，然后通过锚点在页面的下方跳转到该状态。

我稍后会发布我的代码，但让我先描述一下这个问题。我的解决方案适用于大多数浏览器，但我发现它在IE11和Edge中失败了。在这些浏览器中，我看到在页面被拉回到页面顶部的Select2元素之前，所需的内容位置会暂时闪烁到视图中。这就像Select2真的想要在视野中。

这是我的（简化）代码：

HTML

<select class="jumpmenu">
    <option value="">Jump to a State</option>
    <option value="#alabama">Alabama</option>
    <option value="#alaska">Alaska</option>
    [ ... ]
</select>

<a name="alabama" id="alabama">&nbsp;</a>
<h2>Alabama</h2>
<a name="alaska" id="alaska">&nbsp;</a>
<h2>Alaska</h2>
[ ... ]

JQUERY

$(".jumpmenu").select2();

$('.jumpmenu').on('select2:select', function (e) {
    window.location.hash = this.options[this.selectedIndex].value;
});

我是否有更好的方法来构建此跳转菜单，以便它在IE和Edge中正确跳转？

Answer 1

我在Select2论坛上从John30013获得了a few suggestions，其中一个对我有用。我最终设置了一个简短的setTimeout，它允许select跳转到锚点之前关闭。以下代码对我有用：

$('.jumpmenu').on('select2:select', function (e) {
    newHash = this.options[this.selectedIndex].value;
    setTimeout(function(){ window.location.hash = newHash;},100);
});

使用Select2跳转到页面锚点的问题

1 个答案: