html中如何设置返回顶部

在一个网站中，很多页面都会出现很长的页面滚动，当用户浏览到底部时，需要不断地向上滚动才能再次操作。这个时候，如果这个网页有一个类似于“返回顶部”的功能，那么用户体验会变得很好。下面通过HTML代码的方式来介绍如何设置“返回顶部”的功能。

<!-- 点击按钮时，调用javascript函数backToTop() -->
<button onclick="backToTop()">返回顶部</button>

<!-- 显示的按钮样式，使用CSS控制 -->
<style>
    button {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 80px;
        height: 80px;
        background: #4CAF50;
        color: #fff;
        font-size: 18px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        Box-shadow: 1px 1px 5px 1px rgba(0,.3);
        z-index: 9999;
    }
</style>

<!-- javascript函数：点击按钮，window滚动至顶部 -->
<script>
    function backToTop() {
        window.scrollTo({
            top: 0,behavior: 'smooth'
        });
    }
</script>

以上代码中，首先定义了一个HTML button元素，当用户点击该按钮时，调用JavaScript函数 backToTop()。该函数作用是使window对象的top属性滚动到0，这样页面就会回到顶部。

接下来，代码中引入了一个样式表（style），通过CSS设置了button元素的样式。其中，设置了该元素的位置（position）、大小（width、height）、背景颜色（background）、字体颜色（color）等属性，使其看起来更加美观。

最后需要注意，如果不希望用户无限制地连续点击返回顶部按钮，建议使用CSS属性 pointer-events: none; 隐藏掉按钮，并在window对象滚动到比较低的位置时（如50px），再显示按钮。也可以通过JavaScript监听window对象的滚动事件来实现该功能。