设计思路:
1、添加滚动事件
2、获取当前窗口滚动高度,判断是否达到了指定高度以上
3、若大于,表明用户下滚,图标显示;若小于,表明用户上滚,图标隐藏
4、为图标添加点击事件,使用animate动画效果设置滚动高度调回0时所需的时间。
$(document).ready(function(){
//为当前窗口添加滚动条滚动事件(适用于所有可滚动的元素和 window 对象(浏览器窗口))
$(window).scroll(function(){
//创建一个变量存储当前窗口下移的高度
var scroTop = $(window).scrollTop();
//判断当前窗口滚动高度
//如果大于100,则显示顶部元素,否则隐藏顶部元素
if(scroTop>100){
$('.return_top').fadeIn(500);
}else{
$('.return_top').fadeOut(500);
}
);
//为返回顶部元素添加点击事件
$('.return_top').click(function(){
//将当前窗口的内容区滚动高度改为0,即顶部
$("html,body").animate({scrollTop:0},"fast");
});
});
【其他实例】
1、水平滑动导航条
2、垂直滑动导航条