用css,html一键回到顶部
时间: 2024-01-26 22:20:02 浏览: 25
好的,下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>一键回到顶部</title>
<style>
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
width: 50px;
height: 50px;
background-color: #555;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 50px;
border-radius: 50%;
transition: background-color 0.3s ease-in-out;
}
#back-to-top:hover {
background-color: #666;
}
</style>
</head>
<body>
<div id="content">
<!-- 此处为页面内容 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel sagittis lectus, quis tristique sapien. Nunc pretium arcu ut enim laoreet, eu tristique diam bibendum. Proin in pretium augue. Sed ante augue, mollis at pharetra in, dictum vel elit. Integer vel massa faucibus, bibendum ante sed, ultricies odio. Sed auctor, quam ac malesuada facilisis, sem odio varius nulla, nec molestie nisl leo vel elit. Donec blandit, quam a tincidunt facilisis, tellus ipsum rhoncus mi, id fringilla velit odio eget enim.</p>
</div>
<div id="back-to-top" title="回到顶部">^</div>
<script>
var backToTop = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.documentElement.scrollTop > 100) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
}
backToTop.onclick = function() {
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
```
这段代码中,我们首先使用 CSS 样式定义了一个“回到顶部”按钮,然后在页面底部添加一个 `<div>` 元素作为按钮,同时使用 JavaScript 监听 `window` 对象的 `onscroll` 事件来判断是否应该显示按钮。当用户单击按钮时,我们再使用 JavaScript 将滚动条位置设置为 0,即可实现一键回到顶部的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)