前端JS返回頂部

css樣式：

		#btnTop{
			position: fixed;
			bottom: 2%;
			right: 2%;
			background: white;
		    width: 45px;
		    height: 50px;
		    text-align: center;
		    line-height: 50px;
		    font-size: 35px;
		    border: 1px solid darkgray;
		    display: none;
		}
		#btnTop:HOVER {
			border: 1px solid lightskyblue;
			background: gainsboro;
			cursor: pointer;
			color:white;
		}

標籤：

		<span id="btnTop" onclick="returnTop()" title="返回頂部">∧</span>

JS：

  		// 當網頁向下滑動 20px 出現"返回頂部" 按鈕
		window.onscroll = function() {
			scrollFunction()
		};
		function scrollFunction() {
			if(document.body.scrollTop > 20) {
				document.getElementById("btnTop").style.display = "block";
			} else {
				document.getElementById("btnTop").style.display = "none";
			}
		}
		// 點擊按鈕，返回頂部
		function returnTop() {
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
		}