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