如何将CSS按钮返回页脚

Question

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

Answer 1

这应该让你开始

http://jsfiddle.net/g1axjn1b/

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

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

你需要的是一个名字顶部的锚点，我们用 <a name=""></a>指定它，它将在页面的最顶部。将页面返回顶部的“按钮”将成为水平参考锚点。 <a href="#"></a>。

你想要做的另一件事是风格。这可能会以你想象得到的方式实现，但我接近它的方式是创建两个div，它们围绕你的角色/ src /你决定使用它的任何东西。在你的页面上包含font-awesome.io后，我推荐fontawesome的向上箭头<i class="fa fa-arrow-up" aria-hidden="true"></i>。

您希望两个div可以一起或单独使用，具体取决于您使用的是什么，它可能更适用于单独对其进行设计，但无论您寻找的代码是否相似。你希望你的div拥有两个属性。边界由三个属性定义，大小，样式，颜色。它看起来像这个border:1px solid black;和你感兴趣的其他属性将是边界半径，它可以接受多达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>