增加回到顶部按钮

404.html

@@ -34,7 +34,7 @@ permalink: /404.html
 		</label>
 
 		<div class="NotFound">
-			
+			<!--NOT FOUND-->
 		</div>
 	</div>
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

css/myui.css

@@ -396,29 +396,82 @@ body {
 .loading span:nth-of-type(1) {
 	animation-delay: .125s
 }
+
 .loading span:nth-of-type(2) {
 	animation-delay: .250s
 }
+
 .loading span:nth-of-type(3) {
 	animation-delay: .375s
 }
+
 .loading span:nth-of-type(4) {
 	animation-delay: .5s
 }
+
 .loading span:nth-of-type(5) {
 	animation-delay: .625s
 }
+
 .loading span:nth-of-type(6) {
 	animation-delay: .750s
 }
 
+.top {
+	display: block;
+	position: fixed;
+	bottom: 10px;
+	right: 25px;
+	height: 40px;
+	width: 40px;
+	border: 10px;
+	background: #ccc;
+	cursor: pointer;
+	border: 2px solid gray;
+	transition: border .3s ease;
+	border-radius: 50%;
+	opacity: 0;
+}
+
+.top:hover {
+	border: 2px solid white;
+}
+
+.topBtn:before {
+	content: '';
+	display: block;
+	position: absolute;
+	width: 50%;
+	height: 50%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(45deg);
+	border-left: 5px solid rgb(30, 30, 30);
+	border-top: 5px solid rgb(30, 30, 30);
+}
+
+.topBtn:after {
+	content: '';
+	display: block;
+	position: absolute;
+	width: 50%;
+	height: 50%;
+	top: 80%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(45deg);
+	border-left: 5px solid rgb(30, 30, 30);
+	border-top: 5px solid rgb(30, 30, 30);
+}
+
 @keyframes load {
 	0% {
 		transform: rotate(0deg)
 	}
+
 	50% {
 		transform: rotate(360deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}

index.html

@@ -51,6 +51,9 @@
 		<span></span>
 		<span></span>
 	</div>
+	<div class="top" title="回到顶部">
+		<span class="topBtn"></span>
+	</div>
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script src="js/drag.js"></script>
 	<script src="js/initialize.js"></script>

js/initialize.js

@@ -2,10 +2,41 @@ $(function () {
 	window.onselectstart = block;
 	window.ontouchstart = block;
 	window.ondragstart = block;
+	var topElem = $('.top'),
+		isCssed = false,
+		docTop;
+	toggleTop();
 	$('.msg-header').Drag($('.msg-container'));
 	$('.menu-container ul li span').on('click', function () {
 		message.alert('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>');
 	});
+	topElem.on('click', function () {
+		$('html,body').animate({
+			scrollTop: '0px'
+		}, 300);
+	});
+	window.onscroll = toggleTop;
+
+	function toggleTop() {
+		docTop = document.documentElement.scrollTop;
+		if (docTop >= 300 && !isCssed) {
+			topElem.css({
+				"display": "block",
+				"animation": "fadeIn .2s forwards"
+			});
+			isCssed = true;
+		} else if (docTop < 300 && isCssed) {
+			topElem.css({
+				"animation": "fadeOut .2s forwards"
+			});
+			setTimeout(function () {
+				topElem.css({
+					"display": "none"
+				});
+			}, 200);
+			isCssed = false;
+		}
+	}
 
 	function block() {
 		return false;

view.html

@@ -51,6 +51,9 @@
 		<span></span>
 		<span></span>
 	</div>
+	<div class="top" title="回到顶部">
+		<span class="topBtn"></span>
+	</div>
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script src="js/drag.js"></script>
 	<script src="js/initialize.js"></script>