原生js实现页面滚动动画
作者：czx_2019
这篇文章主要为大家详细介绍了原生js实现页面滚动动画，使用了requestAnimationFrame，文中示例代码介绍的非常详细，具有一定的参考价值，感为兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现页面滚动动画的具体代码，供大家参考，具体内容如下
需求：
1 页面滚动到对应板块，左侧对应的索引高亮
2 点击左侧的索引，滚动到对应的板块
代码如下，直接拷贝到html文件就可以使用
<!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>
html, body, ul {
margin: 0;
padding: 0;
}
.section li {
height: 400px;
}
li {
list-style: none;
}
.indexs {
width: 40px;
background-color: #000000;
color: #ffffff;
position: fixed;
left: 20px;
bottom: 50px;
display: none;
}
.indexs.active {
display: block;
}
.indexs li {
padding: 10px;
text-align: center;
user-select: none;
}
.indexs li.addcolor {
background-color: red;
}
header {
height: 1000px;
background-color: purple;
}
footer {
height: 200px;
background-color: rgb(15, 218, 15);
}
</style>
</head>
<body>
<header></header>
<ul class="section">
<li style="background-color: palegreen;">1</li>
<li style="background-color: rgb(15, 218, 15);">2</li>
<li style="background-color: rgb(24, 203, 209);">3</li>
<li style="background-color: rgb(167, 152, 251);">4</li>
<li style="background-color: rgb(251, 152, 165);">5</li>
<li style="background-color: palegreen;">6</li>
<li style="background-color: rgb(15, 218, 15);">7</li>
<li style="background-color: rgb(24, 203, 209);">8</li>
<li style="background-color: rgb(167, 152, 251);">9</li>
<li style="background-color: rgb(251, 152, 165);">10</li>
</ul>
<ul class="indexs">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<footer></footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
let scrollTop = 0
let section = document.querySelector('.section')
let sectionLi = document.querySelectorAll('.section li')
let indexs = document.querySelector('.indexs')
let indexsLi = document.querySelectorAll('.indexs li')
let ofseTop = 0
let requestId = null
let recordScrollTop = 0
// 页面滚动方向
let scrollDirection = null
let diffX = 0
let diffY = 0
let scrollAction = {x: 'undefined', y: 'undefined'}
let lastI = 0
let direction = null
window.onscroll = myScroll
function myScroll(e) {
scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// 当header滚出去时出现左侧导航
if (section.offsetTop -scrollTop <= 0) {
indexs.classList.add('active')
} else {
indexs.classList.remove('active')
}
// 滚到sectionLi对应的li时候 给indexs对应的li红色高亮
for (let i = 0; i < sectionLi.length; i++) {
if(sectionLi[i].offsetTop - scrollTop <= 30) {
for (let j = 0; j < indexsLi.length; j++) {
indexsLi[j].classList.remove('addcolor')
}
indexsLi[i].classList.add('addcolor')
}
}
}
// 点击indexs对应的li 页面滚回到section对应的li
for (let i = 0; i < indexsLi.length; i++) {
indexsLi[i].addEventListener('click', function (e) {
for (let j = 0; j < indexsLi.length; j++) {
indexsLi[j].classList.remove('active')
}
// i就是被点击的那个li的索引值
indexsLi[i].classList.add('active')
// 记录下被点击的li的offsetTop
ofseTop = sectionLi[i].offsetTop
// 第一种方法 jquery 动画 这里不用jquery 用requestAnimationFrame
// $('html,body').animate({
// scrollTop: ofseTop
// }, 300)
// 第二种方法 requestAnimationFrame
if(i - lastI > 0) {
direction = 'down'
} else if(i - lastI < 0){
direction = 'up'
}
// 更新lastI
lastI = i
// 记录点击li的时候 当前页面卷出去了多少
recordScrollTop = document.body.scrollTop || document.documentElement.scrollTop
requestId = requestAnimationFrame(scrollAnimate)
})
}
function scrollAnimate(){
// 滚动条向下滚动 页面向上翻 当前页面卷出去更多
if (direction && direction === 'down') {
recordScrollTop += 30
if (recordScrollTop >= ofseTop) {
direction = null
return cancelAnimationFrame(requestId)
}
}
// 滚动条向上滚动 页面向下翻 当前页面卷出去更少
if (direction && direction === 'up') {
recordScrollTop -= 30
if (recordScrollTop <= ofseTop) {
direction = null
return cancelAnimationFrame(requestId)
}
}
document.body.scrollTop = recordScrollTop
document.documentElement.scrollTop = recordScrollTop
requestId = requestAnimationFrame(scrollAnimate)
}
// 人为鼠标滚动判断页面滚动方向 这个函数在这个案例用不到
function scrollFunc() {
if (typeof scrollAction.x == 'undefined') {
scrollAction.x = window.pageXOffset
scrollAction.y = window.pageYOffset
}
diffX = scrollAction.x - window.pageXOffset
diffY = scrollAction.y - window.pageYOffset
if (diffX < 0) {
// Scroll right
scrollDirection = 'right'
} else if (diffX > 0) {
// Scroll left
scrollDirection = 'left'
} else if (diffY < 0) {
// Scroll down
scrollDirection = 'down'
} else if (diffY > 0) {
// Scroll up
scrollDirection = 'up'
}
scrollAction.x = window.pageXOffset
scrollAction.y = window.pageYOffset
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。