锚链接到页面的某个位置

我有一个链接到另一个页面的锚链接。 单击它时，默认情况下会转到下一页的顶部。 我想把它带到页面的某个位置。 我该怎么做（使用jQuery幻灯片效果或普通的HTML）？

例如，当单击.sample a时，我希望它将您带到链接页面的某个位置。

Answer 1

好的，所以这个答案非常具体针对您的问题。

没有其他解决方案工作的原因是，当页面加载时，隐藏与锚点匹配的div元素。

要certificate这一点，请单击主页上的链接，看它不起作用。 然后将#whatever的哈希值#whatever为#bgaboutbody ，您将看到它正常工作。

所以，使用这样的东西会让它适合你。 基本上，如果有哈希值，它将动画到正确的位置。 把它放在页面最底部的脚本块中（在标签的正上方）

 window.setTimeout(function(){ if(window.location.https://stackoverflow.com/questions/1854218/anchor-linking-to-a-certain-position-of-the-page/hash){ var $target = $(window.location.https://stackoverflow.com/questions/1854218/anchor-linking-to-a-certain-position-of-the-page/hash).closest("#bgaboutbody"); if($target.length) $('html, body').animate({scrollTop: $target.offset().top}, 1000); } }, 100); 

学习使用后备：

最好确保在没有JavaScript的情况下在这样的销售网站上加载您的内容。 （在网络应用程序中，我觉得这是一个不同的讨论）。 我建议使用我给你的解决方案，在这个问题中你将js类添加到页面中的html元素。 然后将你的CSS作为这样的范围：

 .js #contact, .js #about, etc { display:none } 

因此，只有JS存在才会隐藏它。 此外，由于此解决方案也使用JavaScript，因此如果JS被禁用，它们仍然可见，因此它仍然有效。

Answer 2

在目标文档中使用这样的锚点：

要么

并在您的源文档中：

 Go to anchor 1 

或在同一文件内：

 Go to anchor 1 

Answer 3

这是我的解决方案。

  $('.container').on('click', function(e){ var https://stackoverflow.com/questions/1854218/anchor-linking-to-a-certain-position-of-the-page/hash = $(this).find('a').attr('href'), target = $('html').find('p'+https://stackoverflow.com/questions/1854218/anchor-linking-to-a-certain-position-of-the-page/hash), location = target.offset().top; $('html, body').stop().animate({scrollTop: location}, 1000); e.preventDefault(); }); 

HTML会是这样的：

 
 click me 
 
 

因此，当单击锚点时，它将滚动到文档中的相应锚点。

Answer 4

首先要做的是在目标页面的某处定义一个锚点：

假设目标页面名为“website.html”。 然后，您必须将锚点附加到链接：

  Click here 

最好的祝愿，
法比安

Answer 5

您可以使用哈希URL“＃”通过简单的html执行此操作。 例如：

可以通过单击以下链接自动滚动到视图中：

 Go to somelocation on this page 

这也可以通过链接到其他页面来完成。

 Go to somelocation on someotherpage 

Answer 6

使用name属性 。

Answer 7

我正在寻找一种更好的方法来做到这一点，但我找不到一个。 我的解决方案是在目标点创建一个零宽度锚点，通过“position：relative”将其拉出正常流量，并确保内容框尽可能高，以便强制下面的元素更加向下这页纸：

 ​ 

将其拉出正常流量会使填充不会成为页面的一部分，但在计算偏移量时，我测试的所有浏览器在定位时都会尊重它。 当然，这仅适用于视口顶部的固定偏移。 它有效，但感觉很笨拙。