Javascript返回顶部
时间: 2023-11-02 10:06:20 浏览: 50
你可以使用以下JavaScript代码来实现返回页面顶部的功能:
```javascript
// 获取“返回顶部”按钮
var btn = document.getElementById("back-to-top");
// 当页面滚动超过一定高度时,显示按钮
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
// 当用户点击按钮时,返回页面顶部
function backToTop() {
document.body.scrollTop = 0; // Safari
document.documentElement.scrollTop = 0; // Chrome, Firefox, IE, Opera
}
```
需要在HTML中添加一个“返回顶部”按钮,并为它绑定上述JavaScript函数。例如:
```html
<button onclick="backToTop()" id="back-to-top" title="返回顶部">返回顶部</button>
```
CSS样式可以用来控制按钮的位置和样式。例如:
```css
#back-to-top {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #00BFFF;
color: white;
cursor: pointer;
padding: 10px;
border-radius: 4px;
}
#back-to-top:hover {
background-color: #0080FF;
}
```