今天与大家分享下网页中经常出现的返回顶部效果
相比原生Javascript,jquery实现起来能够省略不少代码。
接下来就直接贴代码啦:
1 $(function(){ 2 $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发 3 var wHeight=$(window).height(); //获取浏览器可视窗口高度 4 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度 5 if(wTop>=wHeight) //当滚动条距离顶部高度超过一屏时执行 6 { 7 $("#btn").show(); //返回顶部按钮显示 8 } 9 else{ 10 $("#btn").hide(); //返回顶部按钮隐藏 11 } 12 }); 13 $("#btn").click(function(){ 14 $("html,body").animate({scrollTop:0},500); //页面500毫秒返回顶部 15 }); 16 });
ok,是不是很简单,jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。
如果想要更加详细的介绍,可以去观看慕课网的教程:http://www.imooc.com/learn/65
时间: 2024-10-12 20:20:38