转到页面顶部

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>

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

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

我知道它在代码片段中工作，但我无法分享完整的示例，但是，如果有任何想法为什么会这样，我将非常感激。

Answer 1

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

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

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