这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战。
杨幂：“爱情的纯度，亲情的浓度，友情的长度，青春的热度，生命的弧度。用自己的真心，处理出自己的真意!一切皆如此，好好体会吧!相信自己能行。”
进入正题，这篇文章就利用javascript实现我们很多网站返回初始/顶部特效，继续往下看吧。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、页面图标标识区域（以h1标签标识）
2、返回顶部按钮
布局核心html代码如下：
<div class="backtop">
<h2>此处为顶部</h2>
<div class="btn">返回顶部</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
加完样式信息后的布局如下图，十分的简陋：
三、Javascript特效
1、获取返回顶部按钮标签对象
let btn = document.getElementsByClassName("btn")[0];
2、设置浏览器滚动响应事件。
(1)首先要将浏览器高度撑开，这里设置为3000px将其撑开；
(2)考虑兼容性
//兼容：谁滚动
// body:document.body
//html:document.documentElement
（3）返回顶部按钮的显示和隐藏
当从顶部滚动的距离大于400px时，显示返回顶部按钮，小于400px时按钮为隐藏状态。
window.onscroll = () => {
let scrollDis = document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollDis);
if (scrollDis > 400) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
}
3、为返回顶部按钮设置鼠标响应事件。
当鼠标点击该按钮时，将document.body和document.documentElement的scrollTop属性值设为0，让整个页面返回到最初始的状态。
btn.addEventListener("click", () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
})
至此，返回初始特效就完成啦！撒花，嘻嘻嘻★,°:.☆(￣▽￣)/$: .°★ 。
