最近要實現一個點擊滾動至指定高度的效果
查閱資料後整了個這
隨便給自己做個筆記
<div>
<button>點擊跳轉</button>
<div>
<span>我是開始位置</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>```
只是留給實現功能的筆記 樣式不管了
```javascript
給個高度
span {
width: 70px;
height: 100px;
display: block;
border: 1px saddlebrown solid;
}
div {
width: 200px;
margin: auto;
text-align: center;
}
複製幾份變得更高
<button>點擊跳轉</button>
<div>
<span>我是開始位置</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>9</span>
</div>
然後寫效果
// 獲取開始位置第一個div
let div = document.querySelectorAll("div")[0]
// 獲取第一個span 開始位置
let start = document.querySelectorAll("span")
//獲取按鈕
let button1 = document.querySelectorAll("button")[0]
let startTap = start[0].offsetTop //獲得頂部距離
// 點擊事件函數
button1.onclick = function () {
//高度*長度
var dis = start[0].offsetHeight * Number(start.length)
// 獲取總高度
let ju1 = document.body.offsetHeight
aa(ju1, startTap) //要傳輸的距離
function aa(x1, y1) {
let distance = y1 - x1 // 距離-開始到頂部的距離
let xx = x1 //頂部距離
setTimeout(() => {
//定時器
const dist = Math.ceil(distance / 10) //常量
//加
xx += dist
window.scrollTo(xx, x1)
// 在調用
aa(xx, y1)
}, 100)//設置動畫時間
}
}
效果不傳了就這樣了
如果有需要可以加個清除定時器
全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
width: 70px;
height: 100px;
display: block;
border: 1px saddlebrown solid;
}
div {
width: 200px;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<button>點擊跳轉</button>
<div>
<span>我是開始位置</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>9</span>
</div>
</div>
</body>
<script>
// 獲取開始位置第一個div
let div = document.querySelectorAll("div")[0]
// 獲取第一個span 開始位置
let start = document.querySelectorAll("span")
//獲取按鈕
let button1 = document.querySelectorAll("button")[0]
let startTap = start[0].offsetTop //獲得頂部距離
// 點擊事件函數
button1.onclick = function () {
//高度*長度
var dis = start[0].offsetHeight * Number(start.length)
// 獲取總高度
let ju1 = document.body.offsetHeight
aa(startTap, ju1) //要傳輸的距離
function aa(x1, y1) {
let distance = y1 - x1 // 距離-開始到頂部的距離
let xx = x1 //頂部距離
setTimeout(() => {
//定時器
const dist = Math.ceil(distance / 10) //常量
//加
xx += dist
window.scrollTo(xx, x1)
// 在調用
aa(xx, y1)
}, 100)//設置動畫時間
}
}
</script>
</html>