###### tags: `jQuery`
# scrollTop, offset 運用
## offset 返回偏移座標
該方法返回的對象包含兩個屬性：top 和 left，以像素計。此方法只對可見元素有效。
語法：`$(selector).offset()`
我們可以利用 `offset()` 來取得元素位置，例如以下範例：
HTML：
```htmlmixed=
<p style="margin-top:100px;">
本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。
</p>
<button>獲得 offset</button>
```
jQuery：
```javascript=
$(document).ready(function () {
$("button").click(function () {
x = $("p").offset().left; //表示p段落與 document x 軸的距離(離左方)
y = $("p").offset().top; //表示p段落與 document y 軸的距離(離上方)
$("#span1").text(x); //把x數值代入 id #span1
$("#span2").text(y); //把y數值代入 id #span2
});
});
```
得出畫面：
範例：https://codepen.io/shinychen/pen/YzQpypM
## offset設置偏移坐標
語法：`$(selector).offset(value)`
可以在 `value` 裡設定 top 或 left 像素座標，例如：top:100,left:0
範例：點擊Button後，P段落會距離網頁上方 100px，左方 0px。
HTML：
```htmlembedded=
<p>This is a paragraph.</p>
<button>設置新的偏移</button>
```
jQuery：
```javascript=
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top:100,left:0});
//點擊後，p段落距離上方 top 100px、左方 left 0px
});
});
```
- 原始畫面：
- 點擊button後畫面：
範例：https://codepen.io/shinychen/pen/PojbPvb
## scrollTop()
scrollTop() 能把捲軸垂直移到指定的位置。
點擊 `Button` `.btn1` 的時候捲軸往下 100px，點擊 `Button` `.btn2` 顯示 捲軸目前的位置像素。
範例：
HTML：
```htmlmixed=
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
```
jQuery：
```javascript=
$(document).ready(function(){
$(".btn1").click(function(){
$("div").scrollTop(100); // 點擊 .btn1 後，視窗往下 100px
});
$(".btn2").click(function(){
alert($("div").scrollTop()+" px"); //點擊 .btn2 後，顯示捲軸目前的位置像素。
});
});
```
- 原始畫面：
- 點擊.btn button後畫面：
範例：https://codepen.io/shinychen/pen/vYZygxw
## 利用 scrollTop() 製作回到最上面的 Page Top 按鈕
HTML：
```htmlmixed=
<figure style="background:#ffdbdb;">
<h2>Title 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas cum commodi, recusandae a odit adipisci facilis saepe neque omnis necessitatibus eos at! Fugiat, cum ipsum, nesciunt odio repudiandae odit, maiores assumenda recusandae veniam ipsam autem! Alias perspiciatis vero corrupti, quia reprehenderit quisquam veniam ad, quas quis veritatis tenetur dolore cumque!</p>
<img src="https://images.unsplash.com/photo-1593643946890-b5b85ade6451?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw0Mnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
</figure>
<a href="#" class="toTop"> TOP</a> //page Top
```
jQuery：
```javascript=
$(document).ready(function () {
$('.toTop').click(function() { //當top被點擊時觸發
$('html, body').animate({ // 有些瀏覽器只支援html，有些只支援body 所以兩個都寫進去
scrollTop: 0 //點擊後回到網頁最上方 0px
}, 800); // 800 速度
return false; //防止預設的事件行為，如a連結點擊後，頁面會跳轉到該元素href屬性指定的頁. 而return false就相當於終止符。
});
});
```
範例：https://codepen.io/shinychen/pen/wveoJyy
## 利用 scrollTop() 把捲軸移到想要的位置
### **情境一：** 點擊 `Title1` 連結時，會移到 Title 1 粉紅區塊
Title 1 粉紅區塊：
HTML：
- 在`<a>`連結設定 `.link1` class。
- 在 Title 1 粉紅區塊 設定 `.title1` class
```htmlmixed=
<ul>
<li><a href="" class="link1">Title 1</a></li>
</ul>
<figure style="background:#ffdbdb;" class="title1">
<h2>Title 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas cum commodi, recusandae a odit adipisci
facilis saepe neque omnis necessitatibus eos at! Fugiat, cum ipsum, nesciunt odio repudiandae odit, maiores
assumenda recusandae veniam ipsam autem! Alias perspiciatis vero corrupti, quia reprehenderit quisquam
veniam ad, quas quis veritatis tenetur dolore cumque!</p>
<img src="https://images.unsplash.com/photo-1593643946890-b5b85ade6451?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw0Mnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt="">
</figure>
```
jQuery：
```javascript=
$(document).ready(function () {
$(".link1").click(function () { //點擊.link1 時觸發
$('html, body').animate({
scrollTop: $('.title1 ').offset().top //找到.title1 用offset().top 指定位置
}, 500);
return false;
});
});
```
---
### **情境二：** 點擊 `Title2` 連結時，會移到 body(整個視窗) 往下+ 330px 的位置
body(整個視窗) 往下+ 330px 的位置：
HTML：
- 在`<a>`連結設定 `.link2` class。
```htmlmixed=
<ul>
<li><a href="" class="link2">Title 2</a></li>
</ul>
<figure style="background:#afe1ff;">
<h2>Title 2</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas cum commodi, recusandae a odit adipisci
facilis saepe neque omnis necessitatibus eos at! Fugiat, cum ipsum, nesciunt odio repudiandae odit, maiores
assumenda recusandae veniam ipsam autem! Alias perspiciatis vero corrupti, quia reprehenderit quisquam
veniam ad, quas quis veritatis tenetur dolore cumque!</p>
<form class="formBox">
<input name="agree" type="checkbox" id="agree">
<label for="agree"></label>我已詳閱並同意相關使用說明
</form>
<img src="https://images.unsplash.com/photo-1630687576589-43a3bc515e85?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3OXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt="">
</figure>
```
jQuery：
```javascript=
$(document).ready(function () {
$(".link2").click(function () { //點擊.link2 時觸發
$('html, body').animate({
scrollTop: $('body').offset().top + 330
//.link2 點擊後，會跑到 body .top(上方) + 330px 的位置
}, 500);
return false;
});
});
```
詳細解說：
因為是body(整個視窗) 往下+ 330px 的位置，所以應該是**從body最上方**開始計算+ 330px，就會到這個位置。
---
### **情境三：** 點擊 `Title3` 連結時，會移到 `.title3 img` 往上 50px 的位置(黃色區塊)
`.title3 img` 往上 50px 的位置(黃色區塊)：
HTML：
- 在`<a>`連結設定 `.link3` class。
- 在 Title 3 黃色區塊 設定 `.title3` class
```htmlmixed=
<ul>
<li><a href="" class="link3">Title 3</a></li>
</ul>
<figure style="background:#fff2b7;" class="title3">
<h2>Title 3</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas cum commodi, recusandae a odit adipisci
facilis saepe neque omnis necessitatibus eos at! Fugiat, cum ipsum, nesciunt odio repudiandae odit, maiores
assumenda recusandae veniam ipsam autem! Alias perspiciatis vero corrupti, quia reprehenderit quisquam
veniam ad, quas quis veritatis tenetur dolore cumque!</p>
<img src="https://images.unsplash.com/photo-1630692762083-f1f2da14a984?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5Nnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt="">
</figure>
```
jQuery：
```javascript=
$(document).ready(function () {
$(".link3").click(function () { //點擊.link3 時觸發
$('html, body').animate({
scrollTop: $('.title3 img').offset().top - 50
//.link3 點擊後，會跑到 .title3 img .top(上方) - 50px 的位置，因為是減，所以位置會在 img 往上 50px。如果要在 img 往下 50px，要用 + 50。
}, 500);
return false;
});
});
```
**詳細解說：**
`.link3` 點擊後，會跑到 `.title3 img` .top(上方) - 50px 的位置，因為是減，所以位置會在 img 往上 50px。如果要在 img 往下 50px，要用 + 50。
範例：https://codepen.io/shinychen/pen/OJgbmrY
本章參考：
[JQuery — scrollTop, offset 運用](https://medium.com/chloelo925/jquery-scrolltop-offset-%E9%81%8B%E7%94%A8-f7bbe93b77c4)
[Responsive scrolltop](https://stackoverflow.com/questions/25975011/responsive-scrolltop)
Sign in with Wallet
Connect another wallet