html+js置顶按钮代码

置顶按钮是一种常见的网页交互设计，通常用于让用户方便快速地回到页面顶部。本文将介绍如何使用HTML和JavaScript实现一个简单的置顶按钮。

button onclick="scrollToTop()">
    返回顶部/button>
    

代码中的button标签定义了一个按钮，onclick属性是触发置顶函数的事件。scrollToTop是我们需要自己编写的JavaScript函数。

script>
function scrollToTop(){
    window.scrollTo(0,0);
}
    /script>
    

上面的代码中，我们使用了window.scrollTo()函数来将页面滚动到指定位置，前面的参数是水平位置，后面的参数是垂直位置，其中(0,0)表示将页面滚动到最顶部。

为了让置顶按钮更加美观，我们可以加上CSS样式。

style>
button{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 80px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    z-index: 999;
}
button:hover{
    background-color: #0062cc;
}
    /style>
    

代码中的样式定义了按钮的位置、大小、颜色等属性，可以根据需求进行自定义。

最后，将以上代码放到HTML文档的合适位置，就可以在页面上看到一个漂亮的置顶按钮了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！