《不想重复造轮子的轮子库》

回顶(纯js)

<style>
.bottom-wrap {display: none;position: fixed;right: 10px;bottom: 30px;height: 40px;width: 40px;background: #FFF;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);border-radius: 20px;}.gotop-button {background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzUyNTY2Njt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNy43LDkuOGwtNy03Yy0wLjItMC4yLTAuNC0wLjMtMC43LTAuM2gwYy0wLjMsMC0wLjUsMC4xLTAuNywwLjNsLTcsN2MtMC40LDAuNC0wLjQsMSwwLDEuNAoJYzAuNCwwLjQsMSwwLjQsMS40LDBMOSw1LjlWMTdjMCwwLjYsMC40LDEsMSwxczEtMC40LDEtMVY1LjlsNS4zLDUuM2MwLjIsMC4yLDAuNSwwLjMsMC43LDAuM3MwLjUtMC4xLDAuNy0wLjMKCUMxOC4xLDEwLjgsMTguMSwxMC4yLDE3LjcsOS44eiIvPgo8L3N2Zz4K') no-repeat;background-position: center;background-size: 20px 20px;}.gotop-button {display: block;width: 40px;height: 40px;cursor: pointer;}
</style>
<div id='goTop' class="bottom-wrap" title="回到顶部"><a class="gotop-button" href="javascript:void(0);"></a></div>
<script>
let goTop = document.getElementById('goTop');window.onscroll = function() {let res = document.body.scrollTop || document.documentElement.scrollTop;if (res >= 400) {goTop.style.display = 'block';} else {goTop.style.display = 'none';}}goTop.onclick = function() {/*document.body.scrollTop = 0;document.documentElement.scrollTop = 0;*/let time = setInterval(function() {var osTop = document.documentElement.scrollTop || document.body.scrollTop;var speed = -osTop / 6;document.documentElement.scrollTop = document.body.scrollTop =osTop + speed;if (osTop == 0) {clearInterval(time);}}, 20);}
</script>

笔记：CSS 实现元素居于页面中间

方式一 Flex布局:
此种方式无需定义 元素宽高

html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
border: 1px solid #dddddd;
padding: 100px;
background-color:green;
}

方式二 定位-未知宽高:
此种方式无需定义 元素宽高

html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
}
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*元素向上向左移动元素高宽的50%，使元素中心在正中*/
border: 1px solid #dddddd;
padding: 100px;
background-color:green;
}

方式三 定位-已知宽高:
此种方式需要定义 元素宽高。思路同上，设置 margin-top: -height/2, margin-left: -width/2

html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
position: relative;
}
div {
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
text-align: center;
height: 80px;
margin-top: -40px;
line-height: 80px;
border: 1px solid #dddddd;
background-color:green;
}

方式四 换一种定位:
与方式 2, 3 一样，只是换一种定位方式 fixed

html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 100px;
border: 1px solid #dddddd;
background-color:green;
}

方式五 利用 margin:
此种方式需要定义 元素宽高. absolute 定位上下左右为0, 设置 margin:auto

* {margin: 0;}
div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: green;
}

待续...