200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 淘宝首页返回顶部效果怎么做到的 – CSS – 前端 css清除默认样式文件夹

淘宝首页返回顶部效果怎么做到的 – CSS – 前端 css清除默认样式文件夹

时间:2024-01-19 10:49:19

相关推荐

淘宝首页返回顶部效果怎么做到的 – CSS – 前端 css清除默认样式文件夹

重写window.onscroll()事件,先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none,一旦event.scrollTop>100(100可以设置为你想要的值)就display:block(fadeIn()),否则display:none(fadeOut())。还要设置返回顶部div点击事件,onclick(function(){$(‘body,html’).animate({scrollTop:0},1000);}),这个什么意思不用偶多说吧,既然搞Jquery,动画还是应该晓得。

<style type=”css/text”> #gotop{position:fixed;right:10px;bottom:10px;display:none}</style><div id=”gotop”></div><script type=”javascript/text”> $(function(){ $(window).scroll(function(){ if($(window).scrollTop > 100){$(“#gotop”).fadeIn(1000);//一秒渐入动画 }else{$(“#gotop”).fadeOut(1000);//一秒渐隐动画 } }); $(“#gotop”).click(function(){ $(‘body,html’).animate({scrollTop:0},1000); }); });</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。