diff --git a/index.html b/index.html
index c882846..23e2b12 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@
 				</svg>
 			</div>
 			<div class="header">
-				<div class="inner">
-					<div class="mod-head">
+				<div class="mod-head">
+					<div class="inner">
 						<div class="bd">
 							<span class="language">
 								<a class="active" href="/relationship/">简体</a>
@@ -431,11 +431,46 @@
 						</div>
 					</div>
 				</div>
+				<div class="mod-fixedbar">
+					<div class="bd">
+						<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
+					</div>
+				</div>
 			</div>
 		</div>
 		<script type="text/javascript" src="dist/relationship.min.js"></script>
 		<script type="text/javascript" src="dist/relationship-mode.min.js"></script>
 		<script type="text/javascript">
+			// 头部滚动
+			(function(){
+				let $header = document.querySelector('.header');
+				document.addEventListener('scroll',function(){
+					let scrollTop = document.documentElement.scrollTop;
+					let ratio = Math.min(scrollTop/1000,1);
+					$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
+					$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
+				});
+			})();
+			// 底部滚动
+			(function(){
+				let timer = null;
+				let $gotop = document.querySelector('.mod-fixedbar a');
+				$gotop.addEventListener('click',function(){
+					cancelAnimationFrame(timer);
+					let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+					let move = scrollTop/18;
+					timer = requestAnimationFrame(function fn(){
+						var oTop = document.body.scrollTop || document.documentElement.scrollTop;
+						if(oTop > 0){
+							document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
+							timer = requestAnimationFrame(fn);
+						}else{
+							cancelAnimationFrame(timer);
+						}
+					});
+				});
+			})();
+
 			// 获取数量
 			document.getElementById('count').innerText = relationship.dataCount;
 
diff --git a/static/image/gotop.png b/static/image/gotop.png
new file mode 100644
index 0000000..04fe0c0
Binary files /dev/null and b/static/image/gotop.png differ
diff --git a/static/style/index.css b/static/style/index.css
index cf9a974..63e4b8a 100644
--- a/static/style/index.css
+++ b/static/style/index.css
@@ -91,6 +91,14 @@ a:hover{
     }
 }
 
+.header{
+    position: sticky;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 99;
+    backdrop-filter: blur(10px);
+}
 .mod-head .bd{
     height: 36px;
     padding: 10px 0;
@@ -645,6 +653,19 @@ a:hover{
     line-height: 30px;
 }
 
+.mod-fixedbar .bd a{
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    display: block;
+    width: 48px;
+    height: 48px;
+    background: rgba(255,255,255,0.8);
+    box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
+    line-height: 48px;
+    text-align: center;
+}
+
 @media screen and (max-width: 1020px) {
     .header{
         margin-bottom: 10px;
diff --git a/zh-HK.html b/zh-HK.html
index f63db09..1861c3d 100644
--- a/zh-HK.html
+++ b/zh-HK.html
@@ -40,8 +40,8 @@
 				</svg>
 			</div>
 			<div class="header">
-				<div class="inner">
-					<div class="mod-head">
+				<div class="mod-head">
+					<div class="inner">
 						<div class="bd">
 							<span class="language">
 								<a href="/relationship/">简体</a>
@@ -431,11 +431,46 @@
 						</div>
 					</div>
 				</div>
+				<div class="mod-fixedbar">
+					<div class="bd">
+						<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
+					</div>
+				</div>
 			</div>
 		</div>
 		<script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script>
 		<script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script>
 		<script type="text/javascript">
+		// 頭部滾動
+		(function(){
+			let $header = document.querySelector('.header');
+			document.addEventListener('scroll',function(){
+				let scrollTop = document.documentElement.scrollTop;
+				let ratio = Math.min(scrollTop/1000,1);
+				$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
+				$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
+			});
+		})();
+		// 底部滾動
+		(function(){
+			let timer = null;
+			let $gotop = document.querySelector('.mod-fixedbar a');
+			$gotop.addEventListener('click',function(){
+				cancelAnimationFrame(timer);
+				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+				let move = scrollTop/18;
+				timer = requestAnimationFrame(function fn(){
+					var oTop = document.body.scrollTop || document.documentElement.scrollTop;
+					if(oTop > 0){
+						document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
+						timer = requestAnimationFrame(fn);
+					}else{
+						cancelAnimationFrame(timer);
+					}
+				});
+			});
+		})();
+
 			// 獲取數量
 			document.getElementById('count').innerText = relationship.dataCount;