如何將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>