---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day7 - jQuery 基礎教學 ＋ back to top 練習"
tags: [軟體工程師體驗營 - 2023]

---

---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day7 - jQuery 基礎教學 ＋ back to top 練習

## 說明
回到頁面頂部的按鈕是一個常見的網頁設計功能。使用 jQuery 可以輕鬆地創建一個回到頂部的按鈕。當使用者向下滾動頁面時，按鈕會出現，當使用者點擊按鈕時，頁面會平滑地滾動回頂部。

> 請先觀看此[影片](https://www.youtube.com/watch?v=GVWOIP-HX70)學習 jQuery
> 要做出此效果，可以特別了解 .click, .animate 語法

## 題目
請為以下範例加上 jQuery 語法，來完成滾動到頁面上方效果
HTML：
```htmlembedded=
<div class="container"></div>
<button id="scrollToTop">往上按鈕</button>
```
CSS：
```css=
.container {
  height: 1000px;
}
```
> 記得載入 jQuery



## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
```js=
$('#scrollToTop').click(function() {
  $('html, body').animate({
    scrollTop: 0
  }, 800);
});
```
-->


回報區
---

| 報數 |     Discord 名字     | Codepen／其他回饋                                                           |
|:----:|:--------------------:| --------------------------------------------------------------------------- |
|  1   |     Berlin#7338      | [Codepen](https://codepen.io/3qberlin/pen/mdzpreM)                          |     |     |     |
|  2   |      snow#0255       | [Codepen](https://codepen.io/snow21723/pen/mdzprpx)                         |     |     |     |
|  3   |       翔.#0859       | [Codepen](https://codepen.io/energy95272z/pen/zYmpKLB)                      |     |     |     |
|  4   |       mo#0447        | [Codepen](https://codepen.io/mozentw/pen/YzJYGjY)                           |     |     |     |
|  5   |      Eero#1147       | [Codepen](https://codepen.io/Eero-Chiao/pen/dygJpaJ)                        |     |     |     |
|  6   |     史滴芬#4310      | [Codepen](https://codepen.io/steven870107/pen/yLRpaaW)                      |     |     |     |
|  7   | charlottelee849#0366 | [Codepen](https://codepen.io/char849/pen/ExdogZV)                           |     |     |     |
|  8   |     銀光菇#1692      | [Codepen](https://codepen.io/genesynthesis/pen/XWxVjBd)                     |     |     |     |
|  9   |    Ann Chou#0146     | [Codepen](https://codepen.io/annchou_illu/pen/wvYpoPB)                      |     |     |     |
|  10  |      Celia#1715      | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/ZEqvBJK)              |     |     |     |
|  11  |      冬天#5215       | [Codepen](https://codepen.io/winter_/pen/yLRpVKM)                           |     |     |     |
|  12  |    RubyChen#9543     | [Codepen](https://codepen.io/rubyyjchen/pen/ZEqvBaK)                        |     |     |     |
|  13  |      vvay#4113       | [Codepen](https://codepen.io/pellmssx-the-sasster/pen/qBJpqYM)              |     |     |     |
|  14  |     Snadra#1987      | [Codepen](https://codepen.io/mlqmhltg/pen/mdzpOxY)                          |     |     |     |
|  15  |       Uli#1946       | [Codepen](https://codepen.io/uli1313/pen/KKGZNBa)                           |     |     |     |
|  16  |     judy123#2363     | [Codepen](https://codepen.io/hsuantsong/pen/rNqpWqp)                        |     |     |     |
|  17  |      Kaya#8857       | [CodePen](https://codepen.io/laron9486/pen/LYgebZd)                         |     |     |     |
|  18  |     jia yu#8896      | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/LYgexEv)              |     |     |     |
|  19  |     CuraLin#2648     | [CodePen](https://codepen.io/curalin/pen/zYmpoWp)                           |     |     |     |
|  20  |      DeLi#8324       | [CodePen](https://codepen.io/delichaomoon/pen/PoyEWZN)                      |     |     |     |
|  21  |     君Jyun#0147      | [codepen](https://codepen.io/JyunCodepen/pen/abREpVx)                       |     |     |     |
|  22  |       Hao#2485       | [codepen](https://codepen.io/Seanfeb16/pen/ExdoNgw)                         |     |     |     |
|  23  |     JimWang#6134     | [codepen](https://codepen.io/Jim-Wang-the-selector/pen/OJBzpRv)             |     |     |     |
|  24  |      Yuki#9465       | [codepen](https://codepen.io/yukilin549/pen/XWxVNVz)                        |     |     |     |
|  25  |    satarkuo#5736     | [codepen](https://codepen.io/SatarKuo/pen/PoyEpNQ)                          |     |     |     |
|  26  |      汪汪#4486       | [Codepen](https://codepen.io/hunwooooof/pen/QWZapMY)                        |     |     |     |
|  27  | K（アギルダー）#0386 | [codepen](https://codepen.io/klay376014/pen/yLRpgzE)                        |     |     |     |
|  28  |    liam9930#4129     | [codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/WNadRLz?editors=1010) |     |     |     |
|  29  |     長方形#9612      | [codepen](https://codepen.io/imjjw/pen/LYgeWbb)                             |     |     |     |
|  30  |     Tina02#2691      | [codepen](https://codepen.io/riifwerr-the-selector/pen/KKGZmZg)             |     |     |     |
|  31  |   Kulimusoda#2785    | [codepen](https://codepen.io/yuch3n_chen/pen/PoyEmaY)                       |     |     |     |
|  32  |    Jaredlee#5887     | [codepen](https://codepen.io/jared-lee/pen/NWOXjNK)                         |     |     |     |
|  33  |    andychiou#4830    | [codepen](https://codepen.io/andychiou1113/pen/PoyEmKr)                     |     |     |     |
|  34  |     ChaosTu#9311     | [codepen](https://codepen.io/torotu/pen/ExdomLQ)                            |     |     |     |
|  35  |      雲漢#5319       | [codepen](https://codepen.io/keon981/pen/abREwoR)                           |     |     |     |
|  36  |      duck#3310       | [codepen](https://codepen.io/papy0715/pen/gOBXVWz)                          |     |     |     |
|  37  |     Rochel#4754      | [codepen](https://codepen.io/rochelwang1205/pen/qBJpjWg)                    |     |     |     |
|  38  |   andrew0404#4576    | [codepen](https://codepen.io/Loonng/pen/mdzpmxY)                            |     |     |     |
|  39  |      冷曄#9378       | [codepen](https://codepen.io/HgHale/pen/qBJpjqG)                            |     |     |     |
|  40  |      辣椒#1002       | [codepen](https://codepen.io/chilichen118/pen/qBJpRXe)                      |     |     |     |
|  41  |    leo.yujie#8280    | [codepen](https://codepen.io/peihsin-the-scripter/pen/gOBoRvL)              |     |     |     |
|  42  |    Jacky7035#9423    | [codepen](https://codepen.io/adens123/pen/PoyEKmR)                          |     |     |     |
|  43  |     ray0304#2070     | [Codepen](https://codepen.io/Ray0304/pen/GRYyrwW)                           |     |     |     |
|  44  |     黑白兔#0684      | [Codepen](https://codepen.io/johnny329/pen/PoyEmLq)                         |     |     |     |
|  45  |      阿榮#8277       | [Codepen](https://codepen.io/codeitaday/pen/abREwVx)                        |     |     |     |
|  46  |      SKey#9905       | [Codepen](https://codepen.io/Dale-Chien/pen/wvYpqwy)                        |     |     |     |
|  47  |      gahwa#3562      | [Codepen](https://codepen.io/gahwa17/pen/QWZaqwW)                           |     |     |     |
|  48  |      泊岸#3466       | [Codepen](https://codepen.io/qoq77416416/pen/QWZaqpj)                       |     |     |     |
|  49  |      兔子#6746       | [Codepen](https://codepen.io/CarrotDetector/pen/ZEqvJNQ)                    |     |     |     |
|  50  |   浪裡小白龍#6860    | [Codepen](https://codepen.io/Emillo/pen/dygJZVy)                            |     |     |     |
|  51  |    HsuanTang#1349    | [Codepen](https://codepen.io/HsuanTang/pen/zYmpPXV)                         |     |     |     |
|  52  |      Akira#9996      | [Codepen](https://codepen.io/Akira-Chen/pen/PoyEEoJ)                        |     |     |     |
|  53  |     jackwu#4437      | [Codepen](https://codepen.io/jackwu1588003/pen/mdzppbm)                     |     |     |     |
|  54  |   clairechen#3498    | [Codepen](https://codepen.io/yi-wen-chen/pen/PoyEENE)                       |     |     |     |
|  55  |     Quantum#6093     | [Codepen](https://codepen.io/Min-Hao-Hung/pen/RwexxKZ)                      |     |     |     |
|  56  |     wiimax#4564      | [codepen](https://codepen.io/willismax/pen/MWPrroN?editors=1010)            |     |     |     |
|  57  |    拉斯卡爾#2696     | [codepen](https://codepen.io/novendia/pen/ZEqvLzr)                          |     |     |     |
|  58  |     wendyli#2155     | [codepen](https://codepen.io/rockayumitw/pen/eYPyVEW)                       |     |     |     |
|  59  |     jelly77#2088     | [codepen](https://codepen.io/Ming-chiang/pen/dygJJaZ?editors=1111)          |     |     |     |
|  60  |      penny#6214      | [Codepen](https://codepen.io/penny8989/pen/KKGZQMd)                         |     |     |     |
|  61  |      Janet#5784      | [Codepen](https://codepen.io/janetlinnn/pen/XWxVZYz)                        |     |     |     |
|  62  |      Rayo#8002       | [Codepen](https://codepen.io/loborayo/pen/YzJYEay)                          |     |     |     |
|  63  |    吳偉雄恩#2256     | [Codepen](https://codepen.io/Bamboo1212/pen/qBJpYpq)                        |     |     |     |
|  64  |      PoWei#8484      | [Codepen](https://codepen.io/harrison-wei-lai/pen/eYPyKpd)                  |     |     |     |
|  65  |   N0c7iluc3n7#4390   | [Codepen](https://codepen.io/huang-yu-cheng/pen/BaqJVWg)                    |     |     |     |
|  66  |      yoyo#1003       | [Codepen](https://codepen.io/pen/yLRpoOw)                                   |     |     |     |
|  67  |    司機叔叔#2463     | [Codepen](https://codepen.io/bigv5566/pen/eYPybpa)                          |     |     |     |
|  68  |      chi93#1548      | [Codepen](https://codepen.io/clarahc/pen/PoyEXaa?editors=1010)              |     |     |     |
|  69  |      狸貓#5863       | [Codepen](https://codepen.io/tanuki320/pen/LYgeMJy)                         |     |     |     |
|  70  |      姜承#8204       | [Codepen](https://codepen.io/Troy0718/pen/mdzpveG)                          |     |     |     |
|  71  |    alexmav04#5048    | [Codepen](https://codepen.io/alexmav04/pen/eYPyxWg?editors=0010)            |     |     |     |
|  72  |     Judy☻ #7874      | [Codepen](https://codepen.io/hsiaohan/pen/WNadPmx?editors=1010)             |     |     |     |
|  73  |      肉魚#2149       | [Codepen](https://codepen.io/zoechen13/pen/bGmaZwB)                         |     |     |     |
|  74  |     jimhop#6510      | [Codepen](https://codepen.io/jimsansssss/pen/OJBzdeV)                       |     |     |     |
|  75  |       Pei#5161       | [Codepen](https://https://codepen.io/Pei0303/pen/JjmMZLv)                   |     |     |     |
|  76  | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/vYVpMbd)                            |     |     |     |
|  77  |   edie599916#7112    | [Codepen](https://codepen.io/Chen-CiCi/pen/poxpBMo?editors=1010)            |     |     |     |
|  78  |      Zhong#8917      | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/OJBzYRq)              |     |     |     |
|  79  |      Lychee KK       | [Codepen](https://codepen.io/kakakala/pen/NWOXVJN)                          |     |     |     |
|  80  |      MitA#7407       | [Codepen](https://codepen.io/qaz15996398/pen/gOBoVyj)                       |     |     |     |
|  81  |    Helen Lu#1391     | [Codepen](https://codepen.io/luhelen/pen/abREEpv)                           |     |     |     |
|  82  |    Bruce-Lee#0629    | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/yLRvBpa?editors=1010) |     |     |     |
|  83  |    henrykgb#5749     | [Codepen](https://codepen.io/henrymorgan666/pen/rNqpVYG)                    |     |     |     |
|  84  |    peihsuan#6315     | [Codepen](https://codepen.io/peihsuanlai/pen/oNaEvaP)                       |     |     |     |
|  85  |       Yuu#5361       | [Codepen](https://codepen.io/alycehwy/pen/XWxZWeP)                          |     |     |     |
|  86  |    Ataraxia#9977     | [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)                      |     |     |     |
|  87  |     Evaxof#1266      | [Codepen](https://codepen.io/evaxof/pen/wvYyGqL)                            |     |     |     |
|  88  | Ying Ying Liu #0836  | [Codepen](https://codepen.io/yingyliu/pen/zYmRqMP)                          |     |     |     |
|  89  |    Alan0305#2423     | [Codepen](https://codepen.io/alan0305/pen/mdzpMXX)                          |     |     |     |
|  90  |     Yui1024#8275     | [Codepen](https://codepen.io/Yuiyuichou/pen/ZEqrOqM)                        |     |     |     |
|  91  |   しあわせね#0036    | [Codepen](https://codepen.io/Front-end-engineer/pen/dygJKQw)                |     |     |     |
|  92  |        Eden.C        | [codepen](https://codepen.io/iseden/pen/MWPQJOQ)                            |     |     |     |
|  93  |       DyH#0526       | [codepen](https://codepen.io/dorihung/pen/wvYyoXw)                          |     |     |     |
|  94  |     jun777#2468      | [codepen](https://codepen.io/js18151102/pen/OJBQmpq)                        |     |     |     |
|  95  |      ABOOS#6276      | [codepen](https://codepen.io/guhungyin/pen/bGmLWoX)                         |     |     |     |
|  96  |    David0799#4415    | [codepen](https://codepen.io/David0799/pen/NWOygPN)                         |     |     |     |
|  97  |       YHT#1696       | [codepen](https://codepen.io/YHT31/pen/bGmLRJr)                             |     |     |     |
|  98  |     Tim123#8361      | [codepen](https://codepen.io/Wangtim4/pen/ZEqrJVz)                          |     |     |     |
|  99  |      betty#0693      | [codepen](https://codepen.io/betty-hu/pen/yLRvoRd?editors=0010)             |     |     |     |
| 100  |     PayRoom#8328     | [CodePen](https://codepen.io/water38198/pen/bGmLLaX)                        |     |     |     |
| 101  | 不要迷戀媽的奶#0295  | [CodePen](https://codepen.io/kewdjbwp-the-typescripter/pen/xxypQao)         |     |     |     |
| 102  |      提姆#9581       | [CodePen](https://codepen.io/timouo/pen/MWPrQjj)                            |     |     |     |
| 103  |      鉦勝#8333       | [CodePen](https://codepen.io/atckmax823/pen/QWZQrYY)                        |     |     |     |
| 104  |      Mindy#7886      | [CodePen](https://codepen.io/Mindyr/pen/KKGQBGZ)                            |     |     |     |
| 105  |      喬喬#2824       | [CodePen](https://codepen.io/joanne-wei/pen/RweQegB)                        |     |     |     |
| 106  |      一瑋#8459       | [CodePen](https://codepen.io/zerosula/pen/VwEQBeR)                          |     |     |     |
| 107  |       cbs#9007       | [Codepen](https://codepen.io/wasdjk/pen/wvYmWoK)                            |     |     |     |
| 108  |    Judy Wei#6103     | [Codepen](https://codepen.io/Judy0718/pen/gOBegJr)                          |     |     |     |
| 109  |     瑪格達#9383      | [Codepen](https://codepen.io/tqndxnfc-the-sasster/pen/eYPMyzP)              |     |     |     |
| 110  |    townyuan#2653     | [Codepen](https://codepen.io/townyuan/pen/KKGojrm)                          |     |     |     |
| 111  |     Yvonne#2721      | [Codepen](https://codepen.io/Evonne/pen/YzJaEmz?editors=1111)               |     |     |     |
| 112  |     Maxine#9061      | [Codepen](https://codepen.io/Maxine_Liao/pen/MWPVNBz)                       |     |     |     |
| 113  |  bonnieli1414#4906   | [Codepen](https://codepen.io/bonnieli1414/pen/gOBzOqp?editors=1111)         |     |     |     |
| 114  |      小明#4408       | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/PoyeEbz)              |     |     |     |
| 115  |      Döng#2328       | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/rNqKBrV)              |     |     |     |
| 116  |   JasonChang#7847    | [Codepen](https://codepen.io/jsonChangJava/pen/oNayXaW)                     |     |     |     |
| 117  |   Elena Lin #3392    | [Codepen](https://codepen.io/elenalin119/pen/RweJaqx)                       |     |     |     |
| 118  |     啊真真 #8940     | [Codepen](https://codepen.io/fctamuvf-the-vuer/pen/ZEqROzb)                 |     |     |     |
| 119  |    肉個阿倫#7172     | [Codepen](https://codepen.io/i9574385/pen/KKGegeZ)                          |     |     |     |
| 120  |     Lainie#1931      | [Codepen](https://codepen.io/Lainie88/pen/bGmKgOd)                          |     |     |     |
| 121  |     alll6z#9204      | [Codepen](https://codepen.io/A6Z/pen/poxKrEw)                               |     |     |     |
| 122  |    Daisy_Li#4231     | [Codepen](https://codepen.io/lidairong-gmail-com/pen/zYmaJMM)               |     |     |     |
| 123  |    變羊魔法#6372     | [Codepen](https://codepen.io/cssf998811/pen/ZEqjQJa)                        |     |     |     |
| 124  |     mike519#4399     | [Codepen](https://codepen.io/mike519tw/pen/MWPBepY)                         |     |     |     |
| 125  |    Jarvis莊#8679     | [Codepen](https://codepen.io/jason-hsuan/pen/PoyBGNY)                       |     |     |     |
| 126  |     FiReBrO#0557     | [Codepen](https://codepen.io/firebro42/pen/QWZBxRZ)                         |     |     |     |
| 127  |      homer#1525      | [Codepen](https://codepen.io/Buckhorn/pen/rNqrbzG)                          |     |     |     |
| 128  |     鄭舜仁#6606      | [Codepen](https://codepen.io/randomno/pen/abRaNyx)                          |     |     |     |
| 129  |     Hanana#9025      | [Codepen](https://codepen.io/hananalin/pen/eYPLzRm)                         |     |     |     |
| 130  |     Jenny真#7532     | [CodePen](https://codepen.io/wei-chen-wu/pen/Poydzme)                       |     |     |     |
| 130  |      又竹#7302       | [CodePen](https://codepen.io/YO_ZU/pen/BaqOLqo)                             |     |     |     |
| 132  |    JhouHank#8132     | [Codepen](https://codepen.io/JhouHank/pen/vYVzyRG)                          |     |     |     |
| 13ˇ  |      依依#6306       | [Codepen](https://codepen.io/Rita-Yang/pen/PoydvbN)                         |     |     |     |
| 134  |     ssshane#0673     | [Codepen](https://codepen.io/sam6091260/pen/YzJObmW)                        |     |     |     |
| 135  |     SASIMI#5099      | [codepen](https://codepen.io/sashimi1327/pen/rNqqaVL)                       |     |     |     |
| 135  |     lishuan#3698     | [codepen](https://codepen.io/lishuan/pen/NWOOqgp)                           |     |     |     |
| 137  |      柚子#3958       | [codepen](https://codepen.io/as6625998/pen/yLRQJXR)                         |     |     |     |
| 138  |    hello77tw#5984    | [codepen](https://codepen.io/luyoyo/pen/XWxyjmm)                            |     |     |     |
| 139  |      羽毛#5463       | [codepen](https://codepen.io/KYuFeather/pen/VwEVEwG)                        |     |     |     |
| 140  |      Elma#4317       | [Codepan](https://codepen.io/4317/pen/XWxyxrR)                              |     |     |     |
| 141  |    lin_lion#7502     | [Codepan](https://codepen.io/Lion-Lin/pen/zYmMMRQ)                          |     |     |     |
| 142  |    Sonia Wu#7154     | [Codepan](https://codepen.io/YUJOU/pen/MWPzZvW)                             |     |     |     |
| 143  |     weiting#3489     | [Codepan](https://codepen.io/weiting14/pen/zYmyxGx)                         |     |     |     |
| 144  |   NathanJames#8120   | [Codepan](https://codepen.io/ufo060204/pen/MWPZywe)                         |     |     |     |
| 145  |      Meiru#6310      | [Codepan](https://codepen.io/mei00/pen/rNqoGYz)                             |     |     |     |
| 146  | Idealisticfool#7104  | [Codepen](https://codepen.io/Job-Wilhelm/pen/wvYQbqa)                       |     |     |     |
| 147  |      東東#5015       | [Codepen](https://codepen.io/wearymask/pen/yLRwaBj)                         |     |     |     |
| 148  |     lishuan#3698     | [Codepen](https://codepen.io/lishuan/pen/wvYOzNX)                           |     |     |     |
| 149  |     杰_jie#9088      | [Codepen](https://codepen.io/hmj8805/pen/PoyvYOR)                           |     |     |     |
| 150  |      FanJJ#8061      | [Codepen](https://codepen.io/yfchenn/pen/mdzYJwB)                           |     |     |     |
| 151  |      Tami#6742       | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/poxmpGV)                 |     |     |     |
| 152  |      薇拉#8110       | [Codepen](https://codepen.io/michellecc0522/pen/xxyvKqN?editors=1111)       |     |     |     |
| 153  |       QOO#8446       | [Codepen](https://codepen.io/QOOQOOQ/pen/qBJeXBV)                           |     |     |     |
| 153  |      小魚#8614       | [Codepen](https://codepen.io/gizelliang/pen/qBQWXmV)                        |     |     |     |
|  154    |  pss940909#8650                    |                                    [Codepen](https://codepen.io/pss940909/pen/MWzwoXX)                                         |
| 155  | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/BaGoWZw)                        |