StackOverflow注释的html锚点，如“StackOverflow”

Question

我发现这样的评论可能会被锚定，对我来说很难理解这个工具。下面的链接是一个例子锚定注释：

http://SO/questions/26696064/slug/26699358?noredirect=1#comment41994753_26699358

根据我对html的理解，#后的#必须存在于html页面中，但我没有在其中找到id或name。当我阅读源代码时，我只找到相关的源代码：

<div id="comments-26699358" class="comments ">
        <table>
            <tbody data-remaining-comments-count="0" data-canpost="true" data-cansee="false" data-comments-unavailable="false" data-addlink-disabled="false">
               <tr id="comment-41994753" class="comment ">

这个片段只告诉我两个相对且分开的is id="comment-41994753"和id="comments-26699358"，最后的锚comment41994753_26699358是从它们生成的吗？或者这是相对于这样使用的框架？

Answer 1

这不是浏览器的行为，橙色的背景颜色和它的滚动进入视图发生在JavaScript。

代码在这个文件中：http://cdn.sstatic.net/Js/full.en.js

非缩小版：http://dev.stackoverflow.com/content/js/full.js

重要的功能是onHashChange_HighlightDestination和doHighlight。

onHashChange_HighlightDestination

它解析哈希参数，例如#comment49509148_30726127，然后调用突出显示方法。

// answers have the form 'lies-like/58534#58534'; comments are 'lies-like/58534#comment60949_58534'
var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);
if (!match) return; // moderator viewing a flagged question, e.g. 'lies-like#question'

if (match[2])
    highlightComment(match[2], match[3]);
else
    highlightAnswer(match[1]);

doHighlight：这个方法最终高亮显示它(橙色背景)，并将注释/答案滚动到scrollIntoView函数的视图中。

var doHighlight = function (jEle) {
    var originalColor = backgroundColor;
    jEle
        .css({ backgroundColor: highlightColor })
        .animate({ backgroundColor: originalColor }, 2000, 'linear', function () { $(this).css('background-color', ''); });

    if (jEle.is('.comment'))
        jEle[0].scrollIntoView(true);
};

Answer 2

答案在于javascript代码中的onHashChange_HighlightDestination函数，它是从init方法调用的，该方法对每个请求都会触发。

正如您在javascript代码的开发人员版本中所看到的，它尝试从请求哈希中提取post id和注释id：

var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);

在那里，它调用highlightComment，它执行scrollIntoView和CSS高亮显示。