---
# System prepended metadata
title: '[Bootstrap] 監測滾動條 ScrollSpy'
tags: [Bootstrap]
---
# [Bootstrap] 監測滾動條 ScrollSpy
###### tags: `Bootstrap`
網頁裡的文字過多便可使用scrollspy以提升使用者瀏覽的便利性，當我們點選上方的選單項目，頁面會自動跳轉到該區塊，選單項目同時也會自動反白，為達此效果便可使用ScrollSpy語法。
* 在每個選單項目上設定id，並在menu裡的項目中的href目標位置為區塊id
* 並可使用jquery增加scroller效果
---
### **實作方式**
1. 在body標籤中新增id
```
```
2. menu中的item使用``標籤，並將href設定為目標section的#id
```
Home
Mission
Team
Advantage
```
3. 用jQuery初始化scrollspy即可完成跳轉
```
$('body').scrollspy({ target:'#main-nav'});
```
4. 若要調整滑動速度，添加以下語法便可設定移動的速度
```
$('#main-nav a').on('click',function(event){
if(this.hash !==""){
event.preventDefault();
const hash = this.hash;
$('html,body').animate({
scrollTop: $(hash).offset().top
},1000, function(){
window.location.hash = hash;
})
}
})
```