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

今天看了很多页面中返回顶部效果,发现有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>

猜你喜欢

转载自blog.csdn.net/qq_42089654/article/details/81173711