jquery滾動屏幕的時候改變導航欄樣式+出現回到頂部

公司是要求做一個屏幕一滾動，導航欄高度變小，和滾動400px的時候出現回到頂部的圖片並且回到頂部。

先了解一些屏幕高度

<script>
			$(document).scroll(function() {     
				var scroH = $(document).scrollTop(); //滾動高度
				var viewH = $(window).height(); //可見高度 
				var contentH = $(document).height(); //內容高度
								      
				if(scroH > 1) { //距離頂部大於100px時
					$(".header").css("height", "100px")      
				}
				
				if(scroH < 1) {
					$(".header").css("height", "141px")
				}
				if(scroH > 400) {
					$("#goTop").css("display", "block")
				}
				if(scroH <= 400) {
					$("#goTop").css("display", "none")
				}
			});
		</script>

這裏 scorH就是屏幕滾動的高度，大於1的時候導航欄高度變小。大於四百的時候出現回到頂部的圖片。

<div id="goTop"></div>
<script>
$(function() {
				$("#goTop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});
			})
</script>

屏幕就滾上去啦