前端网站开发中的返回顶部按钮具体操作

html部分：

<button οnclick="scrollToTop()" id="myBtn" title="返回顶部">↑</button>

css部分：

 /* 返回顶部按钮样式 */
      #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #f9f9f9;
        color: black;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
      }
      
      #myBtn:hover {
        background-color: #777;
      }

js部分：

 // 返回顶部按钮显示
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
      } else {
        document.getElementById("myBtn").style.display = "none";
      }
    }

    // 返回顶部功能
    function scrollToTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }

页面内容滚动下拉时，出现返回顶部按钮，点击按钮，能够返回顶部。