有时大家需要在一个网页中让用户从底部回到头部，比如一个很长的页面列表，用户需要不断下拉才能看到最上面的内容，这时候就需要一个回到顶部的按钮。而使用CSS可以实现一个比较简单的方式来实现这个功能。
html,body {
scroll-behavior: smooth;
}
.scroll-to-top {
position: fixed;
right: 20px;
bottom: 20px;
display: none;
z-index: 9999;
}
.scroll-to-top img {
width: 50px;
height: 50px;
cursor: pointer;
}首先大家得让大家的页面顶部滚动到顶部的过程变得平滑，这就需要使用CSS的scroll-behavior属性。当这个属性被设置成smooth时，浏览器将会以平滑的方式滚动到指定位置。
接下来大家需要给大家的回到顶部的按钮定义样式，上面的代码就定义了一个.scroll-to-top类，它有一个固定的位置在屏幕右下角，一个默认是隐藏的模式。而大家的实际按钮就是一个图像，它被定义为img元素，除了设置它的宽和高，还设置了指针样式，表示它可以被点击。
// When the user scrolls down 20px from the top of the document, show the button
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";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}最后，大家需要使用JavaScript代码来实现按钮的点击功能。上面的代码定义了一个按钮，并给它一个idmyBtn，当用户滚动到距离页面顶部20像素的位置时，这个按钮就会显示出来。当用户点击这个按钮时，页面就可以平滑地回到顶部了，这是通过JavaScript修改了scrollTop的值来实现的。
这样使用CSS和JavaScript就能实现一个回到顶部的按钮了。通过这种技术，大家可以使大家的网站变得更加友好和易用。如果您在自己的网站中使用了这种方法，您就可以帮助用户更容易地找到自己想要的内容，同时更好地提升你的用户体验。