Question

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

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

Answer 1

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

<a name="anchor1"></a>

或

<a id="anchor1"></a>

并在您的源文档中：

<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>

或在同一文件中：

<a href="#anchor1">Go to anchor 1</a>

Answer 2

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

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

要证明这一点，请点击主页上的链接，然后看到不工作。然后将哈希从#whatever更改为#bgaboutbody，您将看到它正常工作。

所以，使用这样的东西会让它适合你。基本上，如果有哈希值，它会动画到正确的位置。将其放在页面最底部的脚本块中（位于</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);

了解如何使用后备：

最好确保在没有JavaScript的情况下在这样的销售网站上加载您的内容。（在Web应用程序中，我觉得这是一个不同的讨论）。我建议您使用我提供的解决方案this question，在js的{{1}}元素中添加html类。然后像这样对CSS进行定位：

<head>

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

Answer 3

这是我的解决方案。

        $('.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就像：

<div class="container">
   <a href="hash">click me</a>
</div>

<p id="hash"></p>

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

Answer 4

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

 <a name="myAnchor" />

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

 <a href="website.html#myAnchor">Click here</a>

祝你好运，
费边

Answer 5

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

<a id="somelocation"></a>

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

<a href="#somelocation">Go to somelocation on this page</a>

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

<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>

Answer 6

使用name attribute。

Answer 7

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

<a name="target" style="position: relative; padding-top: 200px">&#x200B;</a>

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

锚链接到页面的某个位置

7 个答案: