JS实现返回顶部最佳的效果

最新推荐文章于 2023-02-04 18:36:32 发布

恪守你我他

最新推荐文章于 2023-02-04 18:36:32 发布

阅读量909

点赞数 1

文章标签：返回顶部 web 前端

本文链接：https://blog.csdn.net/qq_42089654/article/details/81173711

版权

今天看了很多页面中返回顶部效果，发现有2种方式是比较容易理解记忆的。

一、利用scrollTop=0达到返回顶部的效果

//当点击toTop元素时，跳转到顶上
    toTop.onclick = function () {
		if (document.documentElement) {
			document.documentElement.scrollTop = 0;
		} else{
			document.body.scrollTop = 0;
		}
	}

二、利用scrollTo(0,0)达到返回顶部的效果

//当点击toTop元素时，跳转到顶上
	toTop.onclick=function () {
		scrollTo(0,0)
	}

另外还有一种比较常见的就是设置锚点，但是这种方式地址栏链接里会出现#号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>锚点返回顶部</title>
		<style type="text/css">
			.cont{
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<div id='toTop'>头部</div>
		<div class="cont">
			我要把内容撑起来
		</div>
		<a href="#toTop">返回顶部</a>
	</body>
</html>

恪守你我他

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS实现返回顶部最佳的效果

今天看了很多页面中返回顶部效果，发现有2种方式是比较容易理解记忆的。一、利用scrollTop=0达到返回顶部的效果//当点击toTop元素时，跳转到顶上 toTop.onclick = function () { if (document.documentElement) { document.documentElement.scrollTop = 0; } el...
复制链接

扫一扫