From bf68ec8543b5f43023aac871c9e96e5f4547bcca Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@63.com> Date: 星期四, 22 十二月 2022 16:47:13 +0800 Subject: [PATCH] # --- src/main/webapp/views/news.html | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 55 insertions(+), 1 deletions(-) diff --git a/src/main/webapp/views/news.html b/src/main/webapp/views/news.html index 15ecfc8..779e730 100644 --- a/src/main/webapp/views/news.html +++ b/src/main/webapp/views/news.html @@ -3,14 +3,68 @@ <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>"); - }, 2000) + if (autoScroll) { + window.scrollTo(0, document.body.scrollHeight) + } + }, 500) + </script> </html> -- Gitblit v1.9.1