html - 转到页面顶部

Question

我在页面的一侧创建了一个图标，单击该图标可以返回页面顶部。

我认为这会相当简单，就像这样:

#back_to_top{
	position:fixed;
	right:0px;
	bottom:80px;
	padding:10px;
	background-color:#fff;
	opacity:0.5;
	border-radius:10px 0px 0px 10px;
	cursor:pointer;
}
#back_to_top img{
	width:50px;
	height:50px;
}
#content{
  height:9999px;
}

<a id="top_of_page"></a>

<div id="content">loads of content</div>

<div id="back_to_top">
	<a href="#top_of_page">
	<img src="media/top.png">
	</a>
</div>

但是，当我单击该图标时，它实际上每次都在页面上向下移动相同数量的像素。

• 我没有其他 anchor 或任何其他具有类似 ID 的东西。
• 我的 anchor 标签是我体内的第一个标签。
• 我的“大量内容”都是从 php 动态生成的。

我知道它在代码段中的工作原理，但我无法分享完整的示例，但是，对于为什么会以这种方式起作用的任何想法，我们将不胜感激。

Answer 1

使用 href="#" 添加一个 a 元素应该可以解决问题。

这里有一个它工作的例子:

<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
<a href="#">To the moon!</a>