jQuery笔记之返回顶部制作思路
- 作者：网页模板
- 类型：文章教程
- 点击次数：
- 发布时间：2014-03-25 12:20
1.用css的定位fixed来实现按钮不随滚动条滚动而变动位置，自始至终在右下角。
2.完成鼠标附上去按钮变化：addClass和removeClass
3.点击之后滑动到顶部：
动画animate({},1500)；
4.判断什么时候显示隐藏按钮
(责任编辑：网页模板)
2.完成鼠标附上去按钮变化：addClass和removeClass
3.点击之后滑动到顶部：
动画animate({},1500)；
4.判断什么时候显示隐藏按钮
$(window).scroll(function(){
if($(document).height() - $(window).height() - $(document).scrolltop() <= 200;){
隐藏按钮代码
}
})
5.参考代码： $(function(){
$(window).scroll(function(){
if($(document).height() - $(window).height() - $(document).scrolltop() <= 200;){
$("#topbtn").show(300).mouseover(function(){
$(this).addClass('current');//设置鼠标移动上去的样式
}).mouseout(function(){
$(this).removeClass('current');
})
}else{$(this).hide(300);//隐藏,也可以用淡入淡出：.fadeOut(300);}
});
$("#topbtn").click(funtion(){
$("body,html").animate({scrollTop:0},1500);//设置滚动条滑动到顶端动画
});
})
(责任编辑：网页模板)
- 本文标签：
- jQuery返回顶部
