将页面直接加载到锚标签答案

【问题标题】：Load page directly to anchor tag将页面直接加载到锚标签
【发布时间】：2014-02-11 18:05:44
【问题描述】：

当我在 URL 中加载带有井号标记的页面时，该页面会加载然后跳转到锚标记。有什么方法可以防止这种“跳转”，或者直接将页面加载到锚标签，或者至少让滚动流畅？

我在 Chrome 和 Firefox 中看到了这个问题，但在 IE 中没有。

【问题讨论】：

如果您在内部链接（即在页面内），您可以添加事件处理程序以实现平滑滚动。但是，如果用户直接输入这样的链接en.wikipedia.org/wiki/HTML#Elements，我怀疑您是否可以控制浏览器如何跳转到锚点#Elements。
@threeFourOneSixOneThree：我不是在谈论内部链接。但是，维基百科页面直接加载到锚点（或至少没有任何可见的跳转）。
嗨@dmr。页面跳转没有办法。由于加载方式，某些页面的跳转似乎较少，但通过哈希标签链接到某个部分的行为是跨浏览器的标准行为。例如，即使是维基百科对我来说也有明显的跳跃。您可以使用 jquery 来增强此行为以使滚动动画化（因此更平滑），或者通过改善整个页面的加载时间来最小化跳转（以允许浏览器更快地跳转到该部分，而不是在它准备好时坐在那里)..
我刚刚有了一个想法。如果您的页面没有锚点或带有锚点名称的 ID，您可以通过在页面加载后将锚点动态添加到 dom-tree 来平滑滚动。

【解决方案1】：

如果您仍然遇到跳跃问题，您可以使用 jQuery：

//Use a RegEx pattern to search for an id, if present
var pattern = new RegExp('\#(.*)');
var id = pattern.exec(window.location)[0].replace('#','');
//Prevent the browser's default behavior of jumping to the id
document.location = '#';
//When the page finishes loading, smoothly scroll to the specified content
$(document).ready(function() {
    if(id != "") {
        $('html,body').animate({
            scrollTop: $('#' + id).offset().top,
        }, 650);
    }
});

请注意，这只会在每次页面加载时有效。

【讨论】：

很好的解决方案。 'offset().top' 之后的 , 给了我一个“unexpected ','”的信息。
您也应该知道，这不适用于 webkit 浏览器。对于那些你需要使用“body”而不是“html”的人。
好收获！在 <html> 元素上调用 animate 似乎在 Chrome (v.32) 和 Firefox (v.27) 中有效，但在 Safari (v.7) 中失败。我已更新代码以使用 body 选择器。
body 不适用于 firefox afaik ;)。所以你必须在你得到浏览器的地方做一个 if 语句。