製作網頁時，click()方法很常被使用到，並且此教學簡單帶到jQuery內的scrollTop()方法，配合click()實現回到網頁頂部教學範例。

什麼是click()方法

click是”點擊”的英文，也就是說click()方法，是使用者點擊了設定好的按鈕或者任何網頁元素，就執行事先寫好的動作。

如下範例，將視窗內的捲軸往下滑後，點一下”回到頂端”，頁面會回到頂部。

---

製作click()方法開始

首先，請在網頁的HTML內插入jQuery的函式庫，這樣jQuery才能撰寫使用，如果不懂為何要插入jQuery函式庫請閱讀jQuery-給視覺設計師的語法教學-1-基本認識jQuery。

---

放入”回到頂部”按鈕，並撰寫CSS外觀

回到頂部按鈕，基本上會固定在畫面右下角，CSS寫法如果有讀者不懂的，再請留言發問。目前這系列文章會以讀者懂CSS語法為前提教學 jQuery，所以如果看不懂CSS的，芋圓可以而外寫一篇教學CSS。

---

撰寫click()方法

用$(” “)，來指定你的按鈕class，指定方式就跟撰寫CSS一樣，前面加上.號即可，如下。

$(".goTop");

之後在指定好的jQuery後方加上 click()方法，如下用.號串接。

$(".goTop").click();

這樣就完成了在.goTop這顆按鈕加上 click()方法，再來就是要為點擊之後做回到頁面頂部的scrollTop()方法加入。

在click()的小括號內，加入匿名函式function(){ }，表示當click被觸發時，會執行click()小括號內的匿名函式。白話文講的意思就是，當click被觸發時，會執行小括號裡面的動作指令，而這動作指令要由 function(){} 包起來，瀏覽器才知道它是直接可以執行的。

$(".goTop").click( function(){
});

在來就要在匿名函式內加入回到頁面頂部的語法scrollTop();

$(".goTop").click( function(){
      $("html,body").scrollTop( 0 );
  });

$(“html,body”)的意思就是，HTML的html標籤或者body標籤。

而後方接續的scrollTop( 0 ); 意思是捲到頁面的特定高度位置，而現在scrollTop的小括號寫0，就是頁面頂部的意思。

---

click()跟scrollTop()完成範例