Question

我正在建立一个几乎所有不同部分都在主页上的网站，当我点击导航栏中的链接时，我使用jQuery滚动滚动到它们

我不得不制作一个不同的页面，我也希望将这些部分链接到该页面，就像当我点击另一页面时它带我到主页的关于div所以我用这个代码吧

<a href="./index.html#about">About.</a>

它确实带我到索引上的div，但div位于我的屏幕中间而不是顶部

我的意思是div的开头应该位于屏幕的顶部（就像我使用主页上的链接导航到它一样）

有什么方法可以解决这个问题吗？

编辑：

当我在同一页面上使用链接时的样子：

https://gyazo.com/b51f24e9a13c6f0c4115bc38df34081f

当我使用其他页面上的链接时的样子：

https://gyazo.com/3724c7486aeef34cc7be5547fb9ffa53

我希望它有意义

编辑：它在chrome中工作正常，问题只发生在firefox

中

Answer 1

您可以使用锚标记的document.location位置。

 <div id="section1_ID">Click Me</div>
 <div id="section1_ID">Click Me</div>
 <div id="section1_ID">Click Me</div>

推荐链接。

<div onClick="document.location='service.html#section1_ID';">
<div onClick="document.location='service.html#section2_ID';">
<div onClick="document.location='service.html#section3_ID';">

更清晰。 Link a div to a particular section on a different page in HTML

Answer 2

此“关于”部分后是否有足够的内容。如果不是，那么它就不会出现在顶部。

锚的另一端是什么样的？它应该去，例如像这样：

<div id="about">...</div>

Answer 3

其中一个原因可能是您的网页没有足够的高度将约移动到屏幕顶部。要解决此问题，您可以向页面或min-height添加div。

另一个原因可能是页面的一部分在页面加载后填充（例如 - 图像），这会增加页面的高度。因此，页面会在正确的位置加载显示，但是当您从另一个页面链接它时，它没有足够的时间来填充页面的那一部分。要解决此问题，您可以在CSS中创建固定高度的页面部分。

如果您共享页面代码，我可以为您提供代码解决方案。

Answer 4

我创建了一个plnkr＆lt; https://plnkr.co/edit/jmKjbwmKCvKGfz3QuExx?p=preview＆gt; ！单击new.html上的超链接后，＃div2将位于顶部！

<a href="index.html#div2">

链接到div不能正常工作

4 个答案: