设计思路:
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"); }); });