javascript锚点

One drawback to my recent example of a CSS3 animated gallery with persistent images is that the technique used anchor tags referenced from a URL. This works perfectly well when the user is directed to the page via a URL that contains an anchor identifier, as in the link I’ve used in the previous sentence:

我最近的一个带有持久图像CSS3动画画廊示例的一个缺点是，该技术使用了从URL引用的锚标记 。 当用户通过包含锚点标识符的URL定向到页面时，这非常好用，就像我在上一句话中使用的链接一样：

<a href=/643/Animated-Gallery-With-Persistent-Images#aussie>the recent example… </a>

… but it becomes an issue if the visitor follows a link to the page that does not contain a hash, such as URLs listed at Google or other sources. In that case, the gallery will not have any anchor information to work from, and thus not present a large image by default.

…但是，如果访问者访问不包含哈希的页面链接(例如Google或其他来源列出的URL)，则会成为问题。 在这种情况下，画廊将没有任何锚信息可用于工作，因此默认情况下不会显示大图像。

To solve this problem, we can employ a simple, single line of JavaScript in the head section of the gallery page:

为了解决这个问题，我们可以在图库页面的head使用简单的一行JavaScript ：

if (!window.location.hash) { window.location.hash = "aussie"; }

Very simply, this code checks for the presence of an anchor in the current URL: if an anchor is not found, JavaScript inserts one itself. This anchor will then be read by the CSS in the gallery page, which will present the image with the matching id.

很简单，此代码检查当前URL中是否存在锚点：如果未找到锚点，则JavaScript会自己插入一个。 然后， CSS将在图库页面中读取该锚点，该CSS页面将显示具有匹配id的图像。

翻译自: https://thenewcode.com/646/Inserting-Anchors-Into-URLs-With-JavaScript

javascript锚点