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

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

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

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

## 題目
請為以下範例加上 jQuery 語法，來完成滾動到頁面上方效果
HTML：

<div class="container"></div>
<button id="scrollToTop">往上按鈕</button>

CSS：

.container {
  height: 1000px;
}

> 記得載入 jQuery

## 回報流程

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


<!--

解答：

$('#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) |