固定链接到页面的某个位置

我有一个链接到另一个页面的固定链接。当它被点击时，默认它会进入下一页的顶部。我想把它带到页面的某个位置。我如何做到这一点（无论是与jQuery幻灯片效果或正常的HTML）？固定链接到页面的某个位置

例如，当.sample a被点击时，我想让它带你到链接页面的某个位置。

2009-12-06 JCHASE11

注意 - 由于我的情况的性质，所有上述解决方案将不起作用。因为我正在使用这个jQuery内容滑块，它不能正常工作。这是很难解释，所以请访问维生素jdesign.com并点击服务按钮。它被散列到目标页面上的特定内容滑块框架，但该窗口在点击时未正确定位。任何其他选项允许您指定目标页面的y坐标？ – JCHASE11 2009-12-06 03:46:28

例如，我没有在http://vitaminjdesign.com/about.html#about上看到目标锚链接，因此它位于顶部。 – cdonner 2009-12-06 04:43:40

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

原因没有其他解决方案的工作是你的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。（在网络应用程序中，我认为这是一个不同的讨论）。我建议使用我给你的解决方案this question，在此页面的<head>中将js类添加到html元素。然后范围你的CSS是这样的：

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

所以它只会被隐藏，如果JS存在。此外，由于这个解决方案也使用JavaScript，它的重要性在于JS被禁用时它们是可见的，所以它仍然可行。

来源

2009-12-06 04:52:15

再次感谢dcneiner。我只是试图把它放在包含锚点的索引页面上。它似乎没有工作。内容加载器似乎并没有首先选择任何内容。你有这个运气吗？ – JCHASE11 2009-12-06 05:42:20

啊，我的不好。我的代码中有一个错误:(我在这里更新了代码，但也尝试http://s3.amazonaws.com/pixelgraphics/stackoverflow/1851141/vjd_sub.html#contact或http://s3.amazonaws.com/ pixelgraphics/stackoverflow/1851141/vjd_sub.html＃networks。此外，在这些链接上，我将'100 ms延迟改为'300' ms。 – 2009-12-06 06:17:53

辉煌！那就行了。？ – JCHASE11 2009-12-06 16:46:58

你可以用简单的HTML使用哈希URL“＃”来做到这一点。例如：

<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>

来源

2009-12-06 03:11:26 Joel

你必须做的第一件事是到目标页面某处定义一个锚：

<a name="myAnchor" />

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

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

最良好的祝愿，
费边

来源

2009-12-06 03:11:38 halfdan

一眼就认出你是Jon Skeet。 – nickf 2009-12-06 04:59:59

使用name attribute。

来源

2009-12-06 03:12:14 cdonner

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

<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>

来源

2009-12-06 03:12:30 cletus

这是我的解决方案。

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

所以在锚点击时会滚动到文档中的相应锚。

来源

2012-09-03 04:34:57 Subash

我正在寻找更好的方法来做到这一点，但我找不到一个。我的解决方案是在目标点处创建一个零宽度锚点，通过“position：relative”将其拉出正常流程，并确保内容框的高度与强制将下列元素向下放置页：

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

拉出来正常流动的不断填充成为网页的一部分，但计算偏移所有的浏览器，当我进行定位时，测试方面，。当然，这只适用于视口顶部的固定偏移量。它可以工作，但感觉很糟糕。

来源

2013-01-17 19:27:37 Rob

固定链接到页面的某个位置

回答

相关问题