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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <!DOCTYPE html>
| <html lang="en">
| <head>
| <meta charset="UTF-8">
| <title>NEWS</title>
| <style>
| /*=============== SCROLL UP ===============*/
| .scrollup {
| text-decoration: none;
| text-align: center;
| width: 25px;
| height: 18px;
| position: fixed;
| right: 1rem;
| bottom: -55%;
| background-color: rgb(108,167,168);
| box-shadow: 0 8px 12px hsla(228, 66%, 45%, .1);
| display: inline-flex;
| padding: .35rem;
| border-radius: .25rem;
| color: #ffffff;
| z-index: 10;
| transition: .3s;
| font-size: 8px;
| }
| .scrollup:hover {
| transform: translateY(-.25rem);
| }
| /* Show Scroll Up*/
| .show-scroll {
| bottom: 5%;
| }
|
| </style>
| </head>
| <body>
| <h1>Hello World</h1>
|
| <a class="scrollup" id="scroll-up">
| <span>顶部</span>
| </a>
| </body>
| <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
| <script>
| let autoScroll = true;
|
| function scrollUp(){
| const scrollUp = document.getElementById('scroll-up');
| if(this.scrollY >= 100) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
| }
| window.addEventListener('scroll', scrollUp)
|
| $(document).on('click ','#scroll-up', function () {
| window.scrollTo(0, 0);
| autoScroll = false;
| })
|
| $(document).on('click ','body', function () {
| autoScroll = false;
| })
|
| setInterval(()=>{
| $("body").append("<h1>Hello World</h1>");
| if (autoScroll) {
| window.scrollTo(0, document.body.scrollHeight)
| }
| }, 500)
|
| </script>
| </html>
|
|
