页面中简单的一键返回顶部功能

html部分

<div>
	<button onclick="returnTop()" id="btnTop" title="返回顶部"><img src="返回顶部.png"></button>
</div>

css部分

/* return top */
	#btnTop {
	  display: none;
	  position: fixed;
	  bottom: 20px;
	  right: 30px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  background-color: #9F9F9F;
	  color: white;
	  cursor: pointer;
	  padding: 10px;
	  border-radius: 2px;
	}
	#btnTop:hover {
	  background-color: #9F9F9F;
	  opacity: 0.5;
	}

js部分

// 当网页向下滑动 30px 出现"返回顶部" 按钮
window.onscroll = function() {
    scrollFunction()
};
		 
function scrollFunction() {
    console.log(121);
    if (document.body.scrollTop > 30 || document.documentElement.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;
}

效果