用jQuery设置一个悬浮图片按钮,点击使页面滑到最顶端
时间: 2023-12-20 15:03:40 浏览: 35
可以使用以下代码实现:
HTML:
```html
<div class="floating-btn">
<img src="your-image-url" alt="Back to top">
</div>
```
CSS:
```css
.floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 9999;
}
```
jQuery:
```javascript
$(document).ready(function() {
// 点击按钮时触发滚动到页面顶部的动画
$('.floating-btn').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
// 监听滚动事件,显示或隐藏按钮
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.floating-btn').fadeIn();
} else {
$('.floating-btn').fadeOut();
}
});
});
```
在上述代码中,我们首先定义了一个位置固定、鼠标指针变为手型的悬浮按钮,并设置了初始的底部和右侧偏移量。然后,我们使用 jQuery 监听按钮的点击事件,当用户点击按钮时,会触发一个滑动到页面顶部的动画。同时,我们还监听了窗口的滚动事件,如果滚动距离超过 200px,则显示悬浮按钮,否则隐藏。
相关推荐
![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)