制作html页面返回顶部的悬浮按钮
现在的网页中都会有返回顶部的悬浮按钮，方便用户在浏览网页时快速回到页面顶部，而不需要手动滚动页面。在本文中，我将会讲解如何制作一个简单的html页面返回顶部的悬浮按钮。
一、HTML结构
首先，我们需要在html文件中添加一个按钮，并将其放置在网页的底部，并且要设置其样式使其成为悬浮按钮，以便用户在浏览网页时可以随时点击返回顶部。
<div id="to-top">
<button id="btn-top">返回顶部</button>
</div>
上述代码中，我们创建了一个包含一个按钮的div元素，并为该元素设置了id属性以便于样式设置，id属性的值为"to-top"。并且在该div元素内，我们创建了一个按钮，按钮的id属性值为"btn-top"，用于通过javascript实现点击操作后返回页面顶部。
二、CSS样式
接下来，我们需要将"to-top"元素样式设置为悬浮按钮。
#to-top {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99;
}
#btn-top {
display: block;
width: 60px;
height: 60px;
line-height: 58px;
text-align: center;
border: none;
border-radius: 50%;
font-size: 18px;
color: #fff;
background-color: #000;
cursor: pointer;
transition: all .3s ease;
}
#btn-top:hover {
background-color: #555;
}
在上述代码中，我们首先设置了#to-top元素的样式，通过将其position属性设置为fixed，使该元素能够悬浮在页面中。接下来，通过设置right和bottom属性值，将其定位于页面右侧底部。z-index属性的值z-index: 99设置该元素的层级，避免与其他元素重叠。
接着，我们通过设置#btn-top元素的样式，为其设置圆形的样式以及相应的字体大小、颜色、背景颜色等，使其看起来像一个典型的返回顶部按钮。在鼠标滑过按钮时，我们设置其背景颜色更改，使得用户更容易明白该按钮的功能。
三、Javascript实现按钮操作
现在，我们已经创建了一个按钮并为其设置了样式，但点击按钮仍然不能使页面返回顶部。因此，我们需要使用javascript为该按钮编写一个事件监听函数，使其能够在按钮被点击时实现返回顶部的操作。
window.onload = function() {
var obtn = document.getElementById('btn-top');
var clientHeight = document.documentElement.clientHeight;
window.onscroll = function() {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > clientHeight) {
obtn.style.display = 'block';
} else {
obtn.style.display = 'none';
}
};
obtn.onclick = function() {
var timer = setInterval(function() {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
if (osTop === 0) {
clearInterval(timer);
}
}, 30);
};
};
上述代码是用于javascript实现的，我们首先通过window.onload函数监听页面加载完成事件，当页面加载完成后代码将执行该函数中的语句。
接着，我们通过document.getElementById函数获取到该页面中的返回按钮，并通过clientHeight属性获取当前页面高度，用于设置返回按钮是否显示及返回顶部速度的计算。
然后，我们在window对象中添加一个onscroll事件，当页面滚动时该事件将会被触发。在该事件中，我们通过scrollTop属性获取页面滚动的高度，如果页面的滚动高度大于当前页面高度，则显示返回顶部按钮，否则隐藏返回按钮。
最后，我们为返回按钮添加onclick事件，当按钮被点击时触发，实现返回页面顶部的操作。我们通过setInterval函数设置定时器，并在每个执行间隔内计算滚动速度，以实现平滑滚动返回页面顶部。同时，当页面还原到最顶部时，关闭该定时器。
四、总结
在本文中，我们详细介绍了如何制作一个html页面返回顶部的悬浮按钮。通过创建一个返回顶部按钮元素并为其设置样式，再通过javascript为该元素添加点击事件来实现返回顶部操作，我们可以方便地让用户返回到页面顶部。希望本文对您有所帮助。