如何将CSS按钮返回页首顶部

Question

如何创建按钮返回顶部。在图像中，中间内容和页脚中的按钮，这有2个圆圈作为边框。

Answer 1

这应该让你开始

http://jsfiddle.net/g1axjn1b/

有很多不同的方法可以做到这一点，我不知道项目的确切范围，我只是把一些非常基本的东西放在一起，我相信别人可以更彻底地回答你，但我想解释一下我的意思做了什么，你需要什么。

您正在尝试创建指向页面顶部的链接。在Javascript中有一些非常好的方法可以做到这一点，我不会介绍。

你需要的是一个带有名字的顶部的锚点，我们用它来指定 <a name=""></a>，它将位于您页面的顶部。将您的页面返回到顶部的“按钮”将是水平参考锚点。 <a href="#"></a>。

你要做的另一件事就是打造它。这可能会以比你想象的更多的方式实现，但我接近它的方式是创建两个div，围绕你的character / src /你决定使用它的任何东西。在您的页面上包含font-awesome.io之后，我建议使用fontawesome的向上箭头<i class="fa fa-arrow-up" aria-hidden="true"></i>。

你想要两个div，它们可以一起设置，也可以单独设置，取决于你使用的是什么，它可能更适用于单独设置它们，但无论你想要的代码是什么类似的。你希望你的div拥有两个属性。边界定义有三个属性，大小，样式，颜色。它看起来像这个border:1px solid black;，你感兴趣的另一个属性是border-radius，最多可以接受4个参数，如果我没有弄错的话，从右上角开始每个角落一个。如果你的圈子实际上是圈子，你就可以将值设置为50％，就像这个border-radius:50%;一样。

我希望这有帮助。我想提到的最后一件事是，你的图片中看起来有一些边距或填充，所以不要忘记添加它们。它们设置在顶部，右侧，底部，左侧;或者上下，左右;或顶部，左右，底部;或者右上角 - 左下角;

Answer 2

您可以使用onclick执行此操作。

<div>        #style your position in this div
    <a onclick="window.scrollTo(0,0)"><img src="images/abc.jpg"></a>
</div>