| | |
|---|
| | | <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> |
|---|
