在日常浏览网页时,尤其是内容较长的页面,是否常有想快速回到顶部的需求?这时,“返回顶部”的小功能就显得格外贴心啦!不仅提升了用户体验,也让页面操作更加便捷。下面,给大家分享一段简单实用的代码,轻松实现这一功能👇:
首先,在你的网页代码中添加以下按钮元素:
```html
```
接着,使用CSS设置按钮样式,让它固定在页面右下角:
```css
myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: 555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
```
最后,添加JavaScript代码,实现滚动效果:
```javascript
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";
}
}
function topFunction() {
document.body.scrollTop = 0; // Safari
document.documentElement.scrollTop = 0; // Chrome, Firefox
}
```
这样,一个美观又实用的“返回顶部”按钮就完成啦!快试试吧,让浏览体验更上一层楼吧!✨