原生js实现页面滚动动画
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js阻止移动端页面滚动的两种方法
方法一: $(document).on('touchmove',function(e){ e.preventDefault(); }) 方法二: position: fixed;top:0;left: 0; 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
-
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此
-
JavaScript实现页面滚动图片加载(仿lazyload效果)
为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么: 3.做技术分享也是在让更多人帮自己测试,因为这个本人木有在项目中实际用到,都是自己琢磨的,所有如果有问题请大家指出,先谢谢了: 4.这个月的博客还没写: 5.刚好木有工作任务,此时不写更待何时... 现在的页面大多都具有的特点 - 内容丰富,图片较多:像我们经常浏览的淘宝,京东,团购网站之类的(本人网购控,属于一个月不在网
-
Javascript实现页面滚动时导航智能定位
常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di
-
基于AngularJS实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改
-
JS实现随页面滚动显示/隐藏窗口固定位置元素
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel
-
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=
-
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
一.应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下: 随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示: 类似的效果在新浪微博上也有: 当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示: 此效果实现原理其实很简单,本文就将展示其实现. 二.实现原理 默认
-
原生Js页面滚动延迟加载图片实现原理及过程
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html
-
js网页侧边随页面滚动广告效果实现
a.scrollTop的计算: b.滚动元素的定位值计算: c.滚动周期设定: 代码如下: css部分: 复制代码 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;} /*position:absolute;用于元素的定位*/ #roll{width:50px; height:100px; background:#99CC00; position:absolute;} Html代码: 复制代码 代