我在页面的一侧创建了一个图标，单击该图标可以返回页面顶部。
我以为这会很简单，就像这样：
#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动态生成的。
我知道它的工作在片段，但我不能分享一个完整的例子，但是，任何想法，为什么这可能会这样做，将是非常感谢。
4条答案
按热度按时间pinkon5k1#
用
href="#"添加一个a元素就可以了。下面是它的一个工作示例：
wi3ka0sx2#
我更喜欢使用Javascript的
window.scrollTo方法，传入0，0会立即将页面滚动到左上角。语法：
window.scrollTo(x-coord, y-coord)x坐标-沿水平轴的像素
y坐标-沿垂直轴的像素
此方法允许您滚动到页面上的任意点。
piwo6bdm3#
你的代码的问题是链接指向的元素不是页面的顶部。html的body元素中有一个填充，它会在元素周围创建一个边框。如果你想保留这个边框并仍然转到页面的顶部，那么你应该将body的填充和边距设置为0。并将顶部元素的填充改变为页面顶部和元素之间的期望边界。
在你的css中添加一些类似的东西
f0brbegy4#
Depending on whether you want to use a link tag or a tag you have two simple approaches.
对于链接标记：
就是你所需要的。
对于按钮标记：
这两个都很好用。