PROMULGATOR

    A℃★

    广东省广州市白云区/天河区
    Html
    Css
    Js
1
2
3
4
5
6
7
<div id="box">
    <p id="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem quo sit, ipsa aspernatur cum nam minima nobis porro consectetur, repellat molestias amet ipsum tempore qui fuga. Ullam iusto fugit voluptate.
    </p>
    <div id="back">
        返回顶部
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 * {
    padding:0;
    margin:0;
}
body,html {
    margin:0;
    padding:0;
    font-family:sans-serif;
}
#box {
    position:relative;
    width:200px;
    height:200px;
    background:lightskyblue;
    border:10px solid lightpink;
    margin:auto;
    overflow:auto;
}
#content {
    letter-spacing:1px;
    font-weight:700;
    line-height:50px;
    text-transform:uppercase;
    background-image:-webkit-linear-gradient(top left,lightpink,lightblue);
}
#back {
    position:fixed;
    top:100px;
    margin-left:162px;
    width:20px;
    height:50px;
    background:rgb(94,206,243);
    font-size:12px;
    line-height:12px;
    text-align:center;
    opacity:.8;
    cursor:pointer;
    display:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var back = document.getElementById('back');
var box = document.getElementById('box');
var HTML = document.documentElement;
function check() {
    var scrT = box.scrollTop,
        boxH = box.clientHeight;
    back.style.display = scrT >= boxH ? 'block' : 'none';
}
back.addEventListener('click', function() {
    back.style.display = 'none';
    box.onscroll = null;
    timer = setInterval(function() {
        var speed = 20;
        var scrT = box.scrollTop;
        if (scrT === 0) {
            clearInterval(timer);
            box.onscroll = check;
        }
        scrT = scrT - speed;
        box.scrollTop = scrT;
    }, 17)
})
box.onscroll = check;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

js返回顶部

更新时间：2020-03-09 12:10:22

0