jQuery 锚链接到页面的某个位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1854218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
anchor linking to a certain position of the page
提问by JCHASE11
I have an anchor link which links to another page. When it is clicked, by default it goes to the top of the next page. I want it brought to a certain position of the page. How do I do this (either with a jQuery slide effect or normal html)?
我有一个链接到另一个页面的锚链接。单击它时，默认情况下它会转到下一页的顶部。我想把它带到页面的某个位置。我该怎么做（使用 jQuery 幻灯片效果或普通 html）？
For instance, when .sample a is clicked I want it to bring you to a certain position of the linking page.
例如，当 .sample a 被点击时，我希望它把你带到链接页面的某个位置。
回答by cletus
Use an anchor like this in your target document:
在目标文档中使用这样的锚点：
<a name="anchor1"></a>
or
或者
<a id="anchor1"></a>
and in your source document:
并在您的源文件中：
<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>
or within the same document:
或在同一文档中：
<a href="#anchor1">Go to anchor 1</a>
回答by Doug Neiner
OK, so this answer is very specific to your problem.
好的，所以这个答案非常适合您的问题。
The reason none of the other solutions worked is that your divelements that would match the anchor are hidden when the page loads.
其他解决方案都不起作用的原因是，div当页面加载时，与锚点匹配的元素会被隐藏。
To prove this out, click on of your links on the home page, and see it notwork. Then change the hash from #whateverto #bgaboutbodyand you will see it work properly.
为了证明这一点，点击主页上您的链接上，看它不工作。然后将哈希值从 更改#whatever为#bgaboutbody，您将看到它正常工作。
So, using something like this will make it work for you. Basically, if there is a hash, it will animate down to the correct spot. Put this in a script block at the very bottom of your page (right above the </body>tag)
所以，使用这样的东西会让它为你工作。基本上，如果有一个散列，它会动画到正确的位置。将其放在页面最底部的脚本块中（</body>标签正上方）
window.setTimeout(function(){
if(window.location.hash){
var $target = $(window.location.hash).closest("#bgaboutbody");
if($target.length)
$('html, body').animate({scrollTop: $target.offset().top}, 1000);
}
}, 100);
Learn to use fallbacks:
学习使用回退：
It is always better to make sure your content will load without JavaScript on a sales site like this. (In a web app I feel that is a different discussion). I would recommend using the solution I gave you to this questionwhere you add a jsclass to the htmlelement in the <head>of the page. Then scope your CSS like this:
在这样的销售网站上，最好确保您的内容无需 JavaScript 即可加载。（在网络应用程序中，我觉得这是一个不同的讨论）。我建议使用我为您提供的解决方案来解决这个问题，您可以在其中向页面中js的html元素添加一个类<head>。然后像这样确定你的 CSS 的范围：
.js #contact, .js #about, etc { display:none }
So it will only be hidden if JS is present. Additionally, since thissolution is also using JavaScript its important they are visible if JS is disabled so it still works.
因此，只有存在 JS 时才会隐藏它。此外，由于此解决方案也使用 JavaScript，因此如果 JS 被禁用，它们是可见的，因此它仍然有效，因此很重要。
回答by Subash
here is my solution.
这是我的解决方案。
$('.container').on('click', function(e){
var hash = $(this).find('a').attr('href'),
target = $('html').find('p'+hash),
location = target.offset().top;
$('html, body').stop().animate({scrollTop: location}, 1000);
e.preventDefault();
});
html would be like:
html 会是这样的：
<div class="container">
<a href="hash">click me</a>
</div>
<p id="hash"></p>
So when clicked on the anchor it will scroll to the respective anchor in the document.
因此，当单击锚点时，它将滚动到文档中的相应锚点。
回答by halfdan
First thing you'll have to do is to define an anchor somewhere in the target page:
您要做的第一件事是在目标页面的某处定义一个锚点：
<a name="myAnchor" />
Let's say the target page is called "website.html". You will then have to append the anchor to the link:
假设目标页面称为“website.html”。然后，您必须将锚点附加到链接：
<a href="website.html#myAnchor">Click here</a>
Best wishes,
Fabian
最好的祝福，
法比安
回答by cdonner
Use the name attribute.
使用名称属性。
回答by Joel
You can do this with simple html using the hash url "#". For example:
您可以使用哈希 url "#" 使用简单的 html 执行此操作。例如：
<a id="somelocation"></a>
Can be auto-scrolled into view by clicking a link like:
可以通过单击以下链接自动滚动到视图中：
<a href="#somelocation">Go to somelocation on this page</a>
This can be done with links to other pages too.
这也可以通过指向其他页面的链接来完成。
<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>
回答by Rob
I was looking for a better way to do this, but I cannot find one. My solution was to create a zero-width anchor at the target point, pull it out of normal flow via "position: relative" and make sure that the content box was as high as it needed to be to force the following element farther down on the page:
我正在寻找一种更好的方法来做到这一点，但我找不到。我的解决方案是在目标点创建一个零宽度锚点，通过“位置：相对”将其从正常流中拉出，并确保内容框尽可能高以迫使以下元素进一步向下这一页：
<a name="target" style="position: relative; padding-top: 200px">​</a>
Pulling it out of normal flow keeps the padding from becoming part of the page, but when calculating the offset all the browsers I tested respect it when positioning. Of course, this only works for fixed offsets from the top of the viewport. It works, but it feels kludgy.
将它从正常流程中拉出来可以防止填充成为页面的一部分，但是在计算偏移量时，我测试的所有浏览器在定位时都会尊重它。当然，这仅适用于距视口顶部的固定偏移量。它有效，但感觉很笨拙。
