GoTop 按鈕讓網頁快速回到最上方

GoTop 按鈕讓網頁快速回到最上方

大綱

步驟 1 : 編輯 HTML

首先，登入你的Blogger 後台 => 選擇 "主題" => 下拉"自訂"選項 

點選 "編輯HTML"


來到HTML網頁編輯中，按 "Ctrl+F" => 出現 Search 的搜尋輸入欄位，輸入: "<head>"  => 找到 <head> 標籤後，在下面貼上以下 2行程式碼:

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' integrity='sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp' rel='stylesheet'/>

再按 "Ctrl+F" => 出現 Search 的搜尋輸入欄位，輸入: "</body>"  => 找到 </body> 標籤後，在上方貼上以下 JavaScript 程式碼:

<script type='text/javascript'>
$(function() {
    /* 按下GoTop按鈕時的事件 */
    $(&#39;#gotop&#39;).click(function(){
        $(&#39;html,body&#39;).animate({ scrollTop: 0 }, &#39;slow&#39;);   /* 返回到最頂上 */
        return false;
    });
    
    /* 偵測卷軸滑動時&#65292;往下滑超過400px就讓GoTop按鈕出現 */
    $(window).scroll(function() {
        if ( $(this).scrollTop() &gt; 400){
            $(&#39;#gotop&#39;).fadeIn();
        } else {
            $(&#39;#gotop&#39;).fadeOut();
        }
    });
});

步驟 2 : 新增 CSS 

接下來是自定義CSS。選擇 "主題" => 直接點選"自訂" 

點選"進階"

在"進階"下方有下拉是選單，點選 "新增 CSS"

然後再輸入欄位空白處，新增一下 CSS 程式碼。(或是原本已有CSS程式碼，則新增在最後面)並且記得按儲存。

#gotop {
    position:fixed;
    z-index:90;
    right:30px;
    bottom:31px;
    display:none;
    width:50px;
    height:50px;
    color:#fff;
    background:#33b5e5;
    line-height:50px;
    border-radius:50%;
    transition:all 0.5s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
#gotop :hover{
    background:#0099CC;
}

步驟 3 : 新增文章時，新增程式碼 

最後，在日後每新增文章內，新增以下程式碼

<a href="https://www.blogger.com/blogger.g?blogID=2031514508322140995#" id="gotop">
   <i class="fa fa-angle-up"></i>
</a>

步驟 4 : 驗收成功

你會發現當你的文章在捲動閱覽後，在你的文章右下方，會出現藍色圓形向上箭頭，點擊後會回到網頁最上方，這樣表示成功了。



參考資料

特色、摘要，Feature、Summary:

關鍵字、標籤，Keyword、Tag:

  • Blogger,

留言

張貼留言

Aron阿龍，謝謝您的留言互動!

這個網誌中的熱門文章

Ubuntu 常用指令、分類與簡介

圖片
常用指令分類與簡介 大綱 前言 常用指令 指令分類 前言 在 Ubuntu 中我們可以打開終端機 (Ctrl+Alt+T) 進行指令操作，就可以透過指令來管理檔案、系統與網路管理。 在說明指令 $ls(1) ， $ 表示命令提示符號， ls 表示指令本身， (1) 表示本指令是在手冊第一章節中，詳細說明請參閱► 線上手冊(man page) 一般指令格式 ► $指令  [選項]  [選項值] 該指令的所有用法  ► $指令 --help 指令是由英文單字縮寫構成，因為指令繁多，所以理解指令原文，就很容易記住了。列如  ►ls：list (中文為列表) 。 常用指令 clear(1) ► 清空螢幕，當終端機列出資料太多。 $clear cd(1)► change directory，移動進入資料夾 $cd ./examples ► 移動到目前資料夾下的 examples 資料夾。 $cd ~  ► 移動到使用者home家目錄：~。 $cd ..  ► 移動到上一層目錄 :  ..。 $cd / ► 移動到根目錄 :  /。 $cd !$ ►移動到前一個命令最後一個參數指定的目錄。 pwd(1) ► print work directory，印出目前工作目錄。 $pwd ls(1) ► list - 查看檔案及子目錄。 $ls ► 列出資料夾、檔案名稱。 $ll  ► 就是  $ls -l : 將資料以列表形式呈現，並且包含檔案細部資料(屬性、權限、時間…) $ls temp  ► 列出資料夾temp 內資料。 $ls -la ► 列出詳細資料和隱藏資料，-l 列出詳細資料，-a 列出隱藏資料。 $ ls *.md ► 列出部分檔案：列出為 .md 的檔案。 cp(1) ► copy，複製檔案。 $echo "TEST" >  README.md ►將字串 "TEST"存新檔案 "README.md" $cp README.md  test.txt ►複製 README.md 另存為 test.txt $cp <file> <dir> ►複製檔案 file 到目錄 dir 下面。 $...
閱讀全文»

iptables的觀念與使用

圖片
iptables的觀念與使用 1.前言 "iptables" 主要是第一層 : 封包過濾式的 netfilter 防火牆，他不是一種服務，是操作netfilter的命令。 Ubuntu server環境，防火牆有很多選擇，從最為易用便捷的 "ufw" 防火牆(Ubuntu預設)，到較新的動態防火牆 " Firewalld "，再到較為專業的防火牆 "iptables"  一應俱全，如何選擇一款合適的防火牆呢？沒有標準答案，但肯定有最合適的選擇。 其中，iptables 這個工具功能全面強大，可以實現很多 ufw 及  Firewalld無 法完成的網絡功能，推薦有一定基礎的用戶使用。 2.理論與觀念 正確的觀念，才能理解，才能正確地應對不同的入侵方式。 iptables防火牆的結構 iptables 是Linux中功能最為強大的防火牆，使用靈活，可以對流入和流出伺服器的數據包進行很精細的控制，當然如果只是用來開啟或禁止某個網絡服務的某個網絡埠，它和 ufw 以及Firewalld都差不多 iptables的三大核心要素是表，鏈和規則。 一言以蔽之，iptables是表的集合，包含四張表(常用的三張 filter, nat, mangle)，表則是鏈的集合，每個表都包含若干個鏈， 而鏈則是規則的集合，真正過濾規則是屬於鏈，iptables的處理流程如下圖所示: 從上圖可觀察到Kernel處理和過濾數據包的流程，描述了封包進入主機到離開主機，會經過哪些tables，這些tables裡面會寫規則，進行放行或攔截。 大致上你可以發現數據包在主機流通時有四張表、五個階段: iptables 四張表(彩色的部分) filter :  整個iptables最關鍵的表，實現封包的過濾，可以由INPUT,FORWARD,OUTPUT這三個能夠實現過濾功能的鏈組成。 nat  :   學過網路的人應該都知道NAT(Network Address Translation)網路地址轉換，正是應為有了這項技術才使得我們現今還能夠有IPv4可以使用，在iptables中也可以實現NAT的相關功能, 例如SNAT, DNAT, MASQUERADE等功能，nat表可以由PREROUTING, FORWARD, P...
閱讀全文»

網路設定必要參數IP、netmask(遮罩)、Gateway(閘道)、DNS

圖片
網路設定必要參數 前言 IP 位址 netmask(遮罩) : 因為 network IP 與 broadcase IP 都可以透過 IP/Netmask 計算出來，因此需要 IP 位址與 Netmask 即可。 Gateway(閘道) 的 IP 位址： 此外，還需要考慮到路由裡面的 Default Gateway 才能夠正確的將非同網域的封包給他傳送出去。 DNS server 的 IP 位址： 想要使用主機名稱上網，就一定要有 DNS server 的 IP 位址才行。 IP: 由 192.168.1.1~192.168.1.254 Netmask(遮罩): 255.255.255.0 Network: 192.168.1.0 Broadcast: 192.168.1.255 Gateway: 每個環境都不同，請自行詢問網路管理員 DNS: 也可以直接設定成 168.95.1.1。台灣地區常用的有中華電信提供的 168.95.1.1 以及 google 提供的 8.8.8.8  與 8.8.4.4 來設定。 那這些參數都需要使用者自己手動來設定嘛？基本上網路參數的給予跟你的主機所在的環境有關系。如果是自己教室內部的環境， 自己指定私有 IP 位址後，再跟計中要一個 public IP 的參數即可～如果是一般住家，可以考慮 ADSL、光纖到府、第四台纜線的網路等等， 如果是跟 ISP 申請伺服器代管，就可以透過手動設定 IP 來處置。基本上，常見的網路參數取得方式有： 自動取得：學名為 dhcp 這個協定，通常使用 auto 取代此方法。網路參數統一放置於 DHCP server 上面，用戶端電腦開機時會去詢問 DHCP 伺服器， 藉以得到正確的網路參數的方式，常見於宿舍網路環境與辦公環境下。 手動設定：手動處理 (manual) 的方式，自己向 ISP 取得相關的網路參數，直接手動設定好網路參數之意。 常見於伺服器本身的環境設定中。 撥接：台灣地區包括 ADSL 以及中華電信光世代，對外都是走電話線，或者是 CAT5 (通常最多到 CAT 5e) 的網路線，只是都附掛在電話上， 需要透過數據機撥接的情況，這種情況的 IP 網路參數也是由 ISP 機房主動分配的，使用者無法手動設定。 第四台纜線 (Cable)：透過電視纜線，第四台提供的線路...
閱讀全文»

了解、分析登錄檔 - log

圖片
了解、分析登錄檔 - log 前言 當你的 Linux 系統出現不明原因的問題時，很多人都告訴你，你要查閱一下登錄檔才能夠知道系統出了什麼問題了，所以說， 了解登錄檔是很重要的事情呢。登錄檔可以記錄系統在什麼時間、哪個主機、哪個服務、出現了什麼訊息等資訊， 這些資訊也包括使用者識別資料、系統故障排除須知等資訊。如果你能夠善用這些登錄檔資訊的話，你的系統出現錯誤時， 你將可以在第一時間發現，而且也能夠從中找到解決的方案，而不是昏頭轉向的亂問人呢。 此外，登錄檔所記錄的資訊量是非常大的，要人眼分析實在很困難。此時利用 shell script 或者是其他軟體提供的分析工具來處理複雜的登錄檔，可以幫助你很多很多喔！ 本文大綱 登錄檔 log 如何運作 logrotate.conf-定義記錄檔的循環的週期 哪些登錄檔log應該定期檢視 常見的登錄檔 Ubuntu下 /var/log/ 下各個日誌檔案的說明 登錄檔所需相關服務 (daemon) 與程式 登錄檔內容的一般格式 分析登錄檔 使用Gnome Logs日誌檢視器查看登錄檔！ 使用指令查看登錄檔 使用 GoAccess 分析 Nginx 網頁記錄檔，即時監控伺服器狀態 Ubuntu日誌管理方法 登錄檔log如何運作 有的登錄檔紀錄的是系統訊息，稱為「系統登錄檔」。而有的登錄檔是紀錄某個特定的服務之使用情況，稱為「服務登錄檔」。通常，這兩者都由系統所提供的一項服務來統一管理(若在傳統Linux系統下這個服務名為syslog，若在ubuntu等系統中則名為rsyslog)，不過也有些大型軟體所提供的服務，其登錄檔不受syslog(或rsyslog)來管理，而有其特別的管理方式。 syslog(或rsyslog)可以設定「哪個類型的系統事件，要寫在哪個登錄檔中」，這些設定被寫在設定檔中。其所在位置如下表： 系列 管理登錄檔的服務 設定檔位置 傳統Linux系統 (如Fedora、centOS、RedHat…等) syslog /etc/syslog.conf Ubuntu等系統 rsyslo...
閱讀全文»

Python 與SQLite 資料庫

圖片
Python 與SQLite 資料庫 大綱 SQLite 基本觀念 資料庫連線 SQLite 資料類型 建立SQLite 資料庫表單 增加SQLite 資料庫表單紀錄 查詢SQLite 資料庫表單 更新SQLite 資料庫表單紀錄 刪除SQLite 資料庫表單紀錄 DB Browser for SQLite 安裝DB browser for sqlite 建立新的 SQLite 資料庫 打開舊的secret資料庫 將台北人口數儲存至 SQLite 資料庫 SQLite 基本觀念 在先前我們有說明 CSV、JSON...等資料格式，我們可以將資料以這些格式儲存，不過我們使用資料時，有時候只是取一個小小的部分，如果每次都要大費周章的開啟檔案處理完成在儲存檔案，其實不是很經濟的事情。 一個好的解決方式是使用輕量級的資料庫程式當作儲存媒介，未來我們可以使用資料庫語法取得資料庫的部分有用資料，這將是一個很好的想法。本文我們將介紹如何使用 Python 建立 SQLite 資料庫，同時也將說明使用 Python 插入insert、截取select、更新update、刪除delete ，SQLite資料庫的內容。 Python 3.0版以上安裝完成後有內建 SQLite 資料庫，本文將以此為實例說明，在使用此 SQLite 前需要 import 導入此 SQLite : import sqlite3 資料庫連線 執行 Python 與資料庫連線的方法如下 : conn = sqlite3.connect(“資料庫名稱”) 上述 conn 是定義的物件名稱，讀者也可以自行定義不一樣的名稱。 connect()  方法執行時，如果 connect() 內的資料庫名稱存在，就可以將 Python 程式與此資料庫名稱建立連線，然後我們可以再 Python 程式內做更進一步的操作，如果這樣庫名稱不存在就會以此為名稱建立一個新的資料庫，然後執行資料庫連線。 資料庫操作結束，我們可以在 Python 內使用下列方法結束 Python 程式與資料庫的連線。 conn.close() 範例 pythonSQLite-01.py :  建立一個新的資料庫 myData.db ，我們習慣使用的 db 當副檔名稱。 ...
閱讀全文»

Blogger文章排版範本

圖片
Text-title大標題 會隨著桌機或手機螢幕調整 Text-head 大標題 會隨著桌機或手機螢幕調整 h1 主題1 會隨著桌機或手機螢幕調整 h2 主題2 會隨著桌機或手機螢幕調整 h3 大標題 會隨著桌機或手機螢幕調整 h4 小標題 會隨著桌機或手機螢幕調整 一般文字 - 一邊不需要能否困難出版社普通使得小學那時付出本文個人，將在這樣外資還在做什麼不限研究所印度，下面機。 參考連結 :尖端的電子設備以及用於配備感知 success 成就、獲獎、感言、結論.....等，文字內容。 quoted m-2 波士頓動力是移動機器人的全球領導者，它應對了一些最棘手的機器人挑戰。我們將動態控制和平衡的原理與複雜的機械設計，尖端的電子設備以及用於配備感知，導航和智能功能的高性能機器人的下一代軟件結合在一起。 callout-info 本文檔包含Spot機器人的重要安全信息。 負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center callout-warning 本文檔包含Spot機器人的重要安全信息。 負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center callout-danger 本文檔包含Spot機器人的重要安全信息。 負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center m-1 border-primary 眼淚設置沒人每個人緩緩精美趕緊跟我賓館之家父母，本身即使物業他就正常策略成就超級反覆，充滿核心而來人口完全。 m-2 bo...
閱讀全文»

Pandas 模組

圖片
Pandas 模組 前言 pandas 是Python程式語言的用於數據操縱和分析的軟體庫。特別是，它提供操縱數值表格和時間序列的資料結構和運算操作。 Pandas 套件全名 Pan el D a taFrame S eries，很多人常用熊貓作為暱稱，但實際上命名的意義和緣由與熊貓八竿子打不著關係。Pandas 套件提供了新的資料結構類別 Index、Series、DataFrame 與 Panel（其中 Panel 資料結構類別在 0.20.0 停止開發維護，）扮演著 Python 在資料分析中的「最後一塊拼圖」；當使用者有表格式資料（Tabular data）的運算處理需求時，就可以透過她達成目的，另外她也提供了豐富的表格式資料載入、整併清理、轉換外型與視覺化的函式。 本文  實例 使用 Python Shell 做演示。 大綱 安裝 Pandas 的 Series 資料型態 使用串列 list 建立 Series 物件 使用 python 字典建立 Series 物件 使用 Numpy 的 ndarray 建立 Series 物件 建立含索引的 Series 物件 使用純量建立 Series 物件 列出 Series 物件索引與值 Series的運算 DataFrame 建立 DataFrame 使用 Series 欄位 columns 屬性 Series 物件的屬性 使用元素是字典的串列建立 DataFrame  使用字典建立 DataFrame index屬性 將 columns 欄位當作 DataFrame 物件的 index 基本 Pandas 資料分析與處理 索引參照屬性 直接索引 四則運算方法 邏輯運算方法 Numpy 的函數應用在 Pandas NaN 相關的運算 NaN 的處理 幾個簡單的統計函數 增加 index 檔案的輸入與輸出 寫入 CSV 格式檔案 讀取 CSV 格式檔案 Pandas 繪圖 使用 Series 畫折線圖表 使用 DataFrame 繪圖表基本知識 直條圖的設計 一個圖表含不同數值資料 多個數值軸的設計 使用 Series 物件設計圓餅圖 時間序列(Time Series) 時間模組 datetime 設定特定時間 一段時間 timedelta 使用 Pyt...
閱讀全文»

如何撰寫Shell Script

圖片
如何撰寫Shell Script 前言 Shell 是一種讓使用者可以和作業系統 Kernel（核心用來控制 CPU、記憶體、硬碟等硬體）互動溝通的橋樑。Shell Script 主要是使用在 Linux 和 MacOS 等 Unix-like 作業系統的自動化操作指令的程式語言。其透過 Shell 命令列直譯器來執行（我們這邊主要使用 bash shell，其他的 Unix shell 觀念大致類似）。 一般情況 Shell Script 常用於系統管理、自動化操作檔案、自動化重複的指令碼、分析 log 等文件檔案、列印呈現我們想要的資料等，透過程式語言的使用來減少重複瑣碎的工作，所以若能妥善使用將提升不少開發者和軟體工程師的日常工作效率。 流程步驟 1. 編輯檔案 一般我們會使用 .sh 副檔名來命名 Shell Script 檔案。然後將該檔案設定為可執行： 這邊以demo.sh 為範例。 更改檔案 +x 的執行權限。 chmod +x demo.sh 可以透過檢視檔案詳細資料觀看是否已有 +x 的執行權限 $ls -l demo.sh # -rwxr-xr-x 1 user staff 106 Nov 16 10:41 demo.sh 2. 第一行: 宣告 # 宣告使用 /bin/bash 這是Linux預設的Shell 為bash，若你使用的是其他的Shell，如: csh, sh, ksh，請改為 /bin/bash=> /bin/csh....。 3. 程式內容直接使用Shell Command 接著，我們先利用一個簡單的範例：將目前執行 process 的 PID 依照數字大小排序，取出前 10 名，來了解撰寫 Shell Script 的基本架構。 # 宣告使用 /bin/bash #!/bin/bash echo "=== 將目前執行 process 的 PID 依照數字大小排序，取出前 10 名 === " # ps 為列出 process 相關資訊，透過 | pipe 管線傳遞資料。awk 可以根據 pattern 進行資料處理（這邊印出第一欄 PID）而 sort 是進行排序，其排序時，預設都是把資料當作字串來排序，若想讓資料根據實際數值的大小來排序，可以加上 -n 參數。-r 則是由大到小排序，預設是...
閱讀全文»

查詢指令或設定 -Linux 線上手冊 - man

圖片
 Linux 線上手冊（man page） man page（manual page 的簡寫）是在 UNIX/Linux 系統上特有的說明文件格式，在這個領域大家都會直接稱呼這樣的文件為 man page。 參考網址 : Ubuntu manuals官 網   (外連結) ， Michael Kerrisk - man page (外連結)  。 基本查詢 一般稍微有經驗的 Linux 使用者大概都知道使用 man 指令加上要查詢的說明主題來閱讀線上手冊，通常主題的名稱就是指令或是函數的名稱，例如查詢 ls 的用法： $man ls $ls(1)、$kill(1)  ....可用指令檢視不同章節的介紹。 指定章節（Section） Linux 的線上手冊分為幾個主要的章節（sections），每個章節對應不同的類別： man 1 ：執行檔或程式或是 shell 指令。如: ls、kill ....等。 man 2 ：系統呼叫（system calls，Linux 核心所提供的函數）。 man 3 ：函式庫或例行工作。 man 4 ：特殊檔案（通常位於 /dev）。 man 5 ：檔案格式與協定，如 /etc/passwd。 man 6 ：遊戲。 man 7 ：雜項（巨集等，如 man(7)、groff(7)）。 man 8 ：系統管理者指令（通常是管理者 root 專用的）。 man 9 ：內核中的接口和子程序（非標準）。 而在線上手冊中的文件都會以小括弧來標明該文件所屬的章節，例如 LS(1) 就代表這份文件隸屬於第 1 個章節。 有些時候一個主題名稱在不同章節中有不同的說明文件，如果查詢一個主題的時候沒有指定章節，預設會依照 1 n l 8 3 2 3posix 3pm 3perl 5 4 9 6 7 這個順序來搜尋，然後顯示第一個搜尋到的章節。 例如 passwd 這個主題有 passwd(1) 與 passwd(5) 兩個章節，如果不指定章節的話： $man passwd 就會顯示 passwd(1)，而若要查詢 passwd(5) 的話，就要明確指定章節數： $man 5 passwd 列出所有章節 有時候我們對於某個主題有興趣，但是卻不知道該主題有哪些章節可以查詢，這時候就可以使用 -a...
閱讀全文»

下載網頁使用 requests 模組

圖片
下載網頁使用 requests 模組 前言 本篇介紹如何在 Python 中使用 requests 模組建立各種 HTTP 請求，從網頁伺服器上取得想要的資料。 大綱 requests 模組重要功能 安裝套件 使用方法 requests 基本應用範例 搜尋網頁特定內容 下載網頁失敗的異常處理 網頁伺服器阻擋造成讀取錯誤 爬蟲程式偽裝成瀏覽器 認識 robots.txt 儲存下載的網頁 檢視網頁原始檔 Chrome瀏覽器為例 requests 模組重要功能 Keep-Alive & Connection Pooling 保持持續連接直到一方中斷和連接池 International Domains and URLs 支持國際域名和 URL Sessions with Cookie Persistence 具有 Cookie 持久性的會話 Browser-style SSL Verification 瀏覽器式 SSL 驗證 Automatic Content Decoding 自動內容解碼 Basic/Digest Authentication 基本/摘要式身份驗證 Elegant Key/Value Cookies 優雅的鍵/值 (key/value) 結構的 Cookie Automatic Decompression  自動解壓縮 Unicode Response Bodies  支援Unicode格式的伺服器回應文件主體 HTTP(S) Proxy Support 支持代理 IP  Multipart File Uploads 分段文件上傳 Streaming Downloads 串流下載 Connection Timeouts 連接超時 Chunked Requests 支援 Chunked 編碼，也可想成分塊傳輸編碼請求 .netrc Support  支持.netrc 文件 安裝套件 pip install requests 使用方法 引入  import requests ...
閱讀全文»