bootstrap实现回到顶部
时间: 2023-11-18 18:04:29 浏览: 66
要实现回到顶部功能,可以使用Bootstrap的scrollspy插件和一些JavaScript代码。
首先,在页面中引入Bootstrap的scrollspy插件和jQuery库:
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
```
然后,在页面中添加一个回到顶部的按钮:
```html
<a href="#" class="btn btn-primary btn-back-to-top" role="button">
<i class="fa fa-chevron-up"></i>
</a>
```
接着,使用CSS样式将按钮隐藏起来:
```css
.btn-back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
}
```
最后,使用一些JavaScript代码监听窗口滚动事件,当窗口滚动到一定位置时显示回到顶部按钮,当按钮被点击时将窗口滚动到顶部:
```javascript
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.btn-back-to-top').fadeIn();
} else {
$('.btn-back-to-top').fadeOut();
}
});
$('.btn-back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
```
这样,当用户滚动页面到一定位置时,将会出现一个回到顶部的按钮,用户点击该按钮时,页面会平滑地滚动回到顶部。