利用jquery,返回顶部
时间: 2023-10-28 18:20:18 浏览: 86
快速返回顶部jquery插件.zip
可以使用以下代码实现返回顶部的功能:
```javascript
$(document).ready(function(){
// 给返回顶部的按钮绑定一个点击事件
$('.back-to-top').click(function(){
// 使用动画效果回到页面顶部
$('html, body').animate({scrollTop: 0}, 800);
});
// 监听窗口滚动事件
$(window).scroll(function(){
// 如果滚动高度大于 200px,显示返回顶部按钮,否则隐藏按钮
if ($(this).scrollTop() > 200){
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
});
```
其中,`.back-to-top` 是返回顶部按钮的类名。在 HTML 中,需要添加一个返回顶部的按钮,例如:
```html
<a href="#" class="back-to-top">返回顶部</a>
```
然后,使用 CSS 对按钮进行样式设置就可以了。
阅读全文