jQuery-給視覺設計師的語法教學-2-返回頁面頂端click()與scrollTop()應用

  •  
  •  
  •  
  •  

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

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

什麼是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()完成範例

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

One thought on “jQuery-給視覺設計師的語法教學-2-返回頁面頂端click()與scrollTop()應用

Add yours

發表迴響

Up ↑