zoukankan      html  css  js  c++  java
  • 回到顶部效果

    回到顶部效果:

    可以中途暂停,达到一屏幕才出现totop按钮,不到一屏按钮消失。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>回到顶部效果</title>
    	<style>
    		body {
    			height: 10000px;
    		}
    		p {
    			position: fixed;
    			right: 20px;
    			bottom: 20px;
    			 50px;
    			height: 50px;
    			background: rgba(102,102,102,0.3);
    			font-size: 18px;
    			line-height: 50px;
    			text-align: center;
    			color: #333;
    			cursor: pointer;
    			display: none;
    		}
    		p:hover {
    			background: rgba(102,102,102,1);
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<p id="totop">Totop</p>
    	<script>
    		window.onload = function () {
    			var totop = document.getElementById('totop');
    			var clientHeight = document.documentElement.clientHeight;
    			console.log(clientHeight);
    			var timer = null;
    			var isTop = true;
    			window.onscroll = function () {
    				var t = document.documentElement.scrollTop || document.body.scrollTop;
    				console.log(t);
    				if (t >= clientHeight) {
    					totop.style.display ='block';
    				}else if(t < clientHeight) {
    					totop.style.display ='none';
    				}
    				if(!isTop) {
    					clearInterval(timer);
    				}
    				isTop = false;
    			}
    			totop.onclick = function () {
    				clearInterval(timer);
    				timer = setInterval(function () {
    					//获取滚动条距离顶部的距离
    					var t = document.documentElement.scrollTop || document.body.scrollTop;
    					var speed = Math.floor(-t / 30);
    					document.documentElement.scrollTop = document.body.scrollTop = t + speed;
    					console.log(t - speed);
    					isTop = true;
    					if (t == 0) {
    						clearInterval(timer);
    					}
    				}, 30);
    			}
    		}
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    github.com/dotnet/orleans
    C#开源
    Windows Server 2016正式版14393英文版ISO镜像下载:_X64FRE_ZH-CN.ISO
    Windows Server 2016
    功能更新到 Windows 10 企业版, 版本 1607
    Load Audio or Vedio files
    Socket.Available 属性
    CaptureManagerSDK
    Net.Sockets
    Solid Edge如何制作装配体的剖视图
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5934083.html
Copyright © 2011-2022 走看看