纯js实现滚动底部加载和返回顶部动画

最新推荐文章于 2022-09-10 11:30:23 发布
最新推荐文章于 2022-09-10 11:30:23 发布
阅读量580 收藏
点赞数
文章标签： css js javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZuoZuoDangerou/article/details/111356014
版权

先看效果

在这里插入图片描述

滚动加载代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: auto;
			}
			div{
				height: 300px;
			}
			.box1{
				background-color: #5F9EA0;
			}
			.box2{
				background-color: #87CEEB;
			}
			.box3{
				background-color: #8A2BE2;
			}
			.box4{
				background-color: #EBCB69;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
	<script type="text/javascript">
		const body = document.querySelector('body')
		body.addEventListener('scroll',e=>{
			const target = e.target //获取滚动对象
			const scrollTop = target.scrollTop //距离顶部距离
			const scrollHeight = target.scrollHeight //整个页面滚动高度
			const clientHeight = target.clientHeight //可视化页面高度
			//scrollTop+clientHeight = 页面已经滚动的高度
			if(scrollTop+clientHeight+20>=scrollHeight){ //距离底部20px时
			//创建div加入body中
				const div = document.createElement('div')
				const R = Math.floor(Math.random()*255+1)
				const G = Math.floor(Math.random()*255+1)
				const B = Math.floor(Math.random()*255+1)
				div.style.backgroundColor = `rgb(${R},${G},${B})`
				body.appendChild(div)
			}
		},false)
	</script>
</html>

滚动动画代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: auto;
			}
			.top{
				position: fixed;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				bottom: 10px;
				right: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color:  #87CEEB;
				background-color: #3b6aeb;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="top">↑</div>
	</body>
	<script type="text/javascript">
		const body = document.querySelector('body')
		const topTo = document.querySelector('.top')
		topTo.addEventListener('click',()=>{
			let scrollTop = body.scrollTop //已经滚动的距离
			const time = setInterval(()=>{ //循环定时器
				body.scrollTo(0,scrollTop) //滚动方法
				if(scrollTop>30){ //在大于30px时滚动速度较快
					scrollTop-=20
				}else{
					scrollTop--
				}
				if(scrollTop<=0) clearInterval(time) //在到顶部清楚定时器
			},1)
		},false)
	</script>
</html>
完整代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: auto;
			}
			div{
				height: 300px;
			}
			.box1{
				background-color: #5F9EA0;
			}
			.box2{
				background-color: #87CEEB;
			}
			.box3{
				background-color: #8A2BE2;
			}
			.box4{
				background-color: #EBCB69;
			}
			.top{
				position: fixed;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				bottom: 10px;
				right: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color:  #87CEEB;
				background-color: #3b6aeb;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="top">↑</div>
	</body>
	<script type="text/javascript">
		const body = document.querySelector('body')
		body.addEventListener('scroll',e=>{
			const target = e.target //获取滚动对象
			const scrollTop = target.scrollTop //距离顶部距离
			const scrollHeight = target.scrollHeight //整个页面滚动高度
			const clientHeight = target.clientHeight //可视化页面高度
			//scrollTop+clientHeight = 页面已经滚动的高度
			if(scrollTop+clientHeight+20>=scrollHeight){ //距离底部20px时
			//创建div加入body中
				const div = document.createElement('div')
				const R = Math.floor(Math.random()*255+1)
				const G = Math.floor(Math.random()*255+1)
				const B = Math.floor(Math.random()*255+1)
				div.style.backgroundColor = `rgb(${R},${G},${B})`
				body.appendChild(div)
			}
		},false)
		
		const topTo = document.querySelector('.top')
		topTo.addEventListener('click',()=>{
			let scrollTop = body.scrollTop //已经滚动的距离
			const time = setInterval(()=>{ //循环定时器
				body.scrollTo(0,scrollTop) //滚动方法
				if(scrollTop>30){ //在大于30px时滚动速度较快
					scrollTop-=20
				}else{
					scrollTop--
				}
				if(scrollTop<=0) clearInterval(time) //在到顶部清楚定时器
			},1)
		},false)
	</script>
</html>
写这么多是不是挺麻烦，自己写滚动逻辑是为了可以自定义滚动的速度，其实scrollTo这个方法自带滚动过渡的只要加上一个属性就行。
topTo.addEventListener('click',()=>{
			body.scrollTo({behavior: "smooth",top:0})
			// let scrollTop = body.scrollTop //已经滚动的距离
			// const time = setInterval(()=>{ //循环定时器
			// 	body.scrollTo(0,scrollTop) //滚动方法
			// 	if(scrollTop>30){ //在大于30px时滚动速度较快
			// 		scrollTop-=20
			// 	}else{
			// 		scrollTop--
			// 	}
			// 	if(scrollTop<=0) clearInterval(time) //在到顶部清楚定时器
			// },1)
		},false)
效果相同
橡皮擦不掉的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 滚动到底部实现（第二版），可滚动区域
PrimaryColor
03-11 885
效果图： 代码： <!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 type="text/css"
js基础:实现页面打开后滚动到最底端的效果
溺水的鱼 - Later equals never.
01-07 492
滚动页面的方法有scroll、scrollBy和scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动 到页面底部，所以参数x为0，y为页面的滚动高度。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。 　　具体步骤： 　　方法一：用scroll方法实现。 &lt;bodyonload="scroll(0,docum...
鼠标点击返回顶部，滚动条动画返回到顶部
weixin_53380949的博客
04-08 692
问题描述： 当我们浏览到网页底部时，会出现返回顶部的按钮，鼠标点击返回顶部，滚动条动画回到顶部而不是直接到顶部。 这是我们需要来借助 js 来实现动画效果，如下： 解决步骤： 1、首先要写一个a标签的超链接，设置一个id值为goTop。 <a id="goTop" href="javascript:;"></a> 2、我们需要在 script 里面先获取这个a标签，给它加一个click监听事件，当我们在点...
滚动到页面顶部----动画封装ban
zluyao_的博客
01-05 285
js动态移动滚动条至底部
qqheheqq的专栏
04-24 870
var currentPosition,timer; function GoBottom(){ timer=setInterval("runToTop()",50); } function runToBottom(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
当滚动条滚动到页面底部自动加载增加内容的js代码
10-25
8. **无限滚动**：这种滚动到底部加载更多内容的机制常被称为“无限滚动”或“无限加载”，它能够提升用户体验，因为用户无需手动翻页，内容会随着滚动自动加载。在实际应用中，还需要考虑如何处理分页逻辑、加载...
页面滚动到底部自动加载数据
04-29
在实现滚动加载中，JQuery的`$(window).scroll()`事件监听用户的滚动行为，`$(document).height()`获取文档总高度，`$(window).height()`获取窗口可视区域高度，以及`$(window).scrollTop()`获取滚动条距离顶部的...
jquery 跳到顶部和底部动画2句代码简单实现
10-27
在这个例子中，我们将探讨如何使用 jQuery 实现页面滚动到顶部和底部的动画效果，只需要两行代码就能轻松实现。 首先，我们需要引入 jQuery 库。在示例代码中，使用的是 jQuery 1.8.0 版本，通过 `<script>` 标签...
实现返回顶部和底部的Jquery特效
12-28
本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先，我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮，可以在页面底部添加一个锚点元素，例如： ```html <a id="top"></a> 返回顶部 ``` ...
【js】js和jq实现回顶动画效果和滚动条监听事件详解
01-20
总结，通过JavaScript和jQuery，我们可以轻松实现回顶动画和滚动条监听事件，提升网页的交互性和用户体验。无论是在网页开发还是移动端应用中，这些技巧都十分常见且实用。了解并熟练运用这些技术，对于前端开发者来...
jQuery滚动到顶部和底部的动态特效代码
05-12
内容索引:脚本资源,jQuery,jQuery滚动插件,回到顶部　　jQuery滚动到顶部和底部的动态特效代码，在页面底部的左侧有两个箭头，一个是向上，一个是向下，点击相应的箭头，会将页面往对应的方向平滑滚动，比如向上的话，可滚动至页面的顶部，有缓冲的效果，了解缓冲效果的应用，可以制作出很多特棒的效果来。
滚动条返回顶部动画效果
背着电脑走江湖的博客
11-05 416
在点击返回顶部 按钮函数里面输入下面这段代码即可实现 FunbackTop() { //返回顶部 var scrollToptimer = setInterval(function () { var top = document.body.scrollTop || document.documentElement.scrollTop; ...
利用js原生实现动态渲染并实现滚动到底部是进一步加载更多内容
qq_52477159的博客
09-10 1262
4.展示区域的高：展示区域对象.offsetHeight。然后定义一页中显示的数据条数pageSize=8（一页中显示八条数据）至此，渲染数据的部分完成，数据来源为：该数据实质为装有对象的数组。2.滚动到底部显示更多数据。
vue使div滚动到最底部动画
Y丶小琪
08-26 1409
例如添加更多任务按钮等等，每次点击都要新生成一条记录，为了方便用户操作，使页面点击的时候可以自己动画懂div的最底端 // <div ref="scroll"> ...</div> handleAddTask() { this.dataList.push({ //自己初始化的数据格式 data_list: [], timeValue: [moment().startOf('day').unix(), moment().startO
js返回顶部和滑到页面底部的动画解决方案
zeroyulong的博客
03-27 1817
一、无动画版本，实际效果太过僵硬，切换太快，页面直接滑到了了底部/顶部var scrollHeight = $(document).height();//文档高度 window.scrollTo(0,scrollHeight);//到达文档底部 window.scrollTo(0,0);//到达文档顶部二、项目前端架构使用zepto进行的开发，zepto的animate方法只能操作css3的动画属...
js实现滚动条到底自动加载图片
经验在于积累而不在于年限---dreamboycx
01-29 1417
一、之前Google的图片搜索结果界面提供了一个功能，即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的，避免来回翻页的繁琐，让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。   $(window).scroll(function() { var o = $('#pincontainer'); /
JS操作滚动条置顶+动画效果
Kuroko's Development Notes
10-14 6784
一、最实用方法： window.scrollTo({ top: 0, behavior: "smooth" }); 调用 scrollTo 方法，并设置 behavior 动画效果。等同于自己手动设置元素的 scrollTop = 0 window.scrollTo 说明： 语法1: 　window.scrollTo(x-coord,y-coord) x-c...
向下滚动页面加载图片的js
weixin_34384557的博客
06-24 350
js代码scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}] img_max: ...
html滚动条往下时载入元素,js实现滚动条滚动到页面底部继续加载
weixin_34108829的博客
05-31 529
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/...
vue 实现滚动到底部加载更多
最新发布
05-23
要实现滚动到底部加载更多，可以借助 Vue 自带的 `scroll` 事件和一些计算属性。具体实现步骤如下： 1. 在需要滚动的容器上监听 `scroll` 事件。 ```html <!-- 列表内容 --> ``` 2. 在 `handleScroll` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值