jQuery-点击返回顶部

在页面上,有时需要点击某个图标钮实现返回顶部的效果。

实现方式如下,给图标按钮增加名叫goTop-hook的类。

 1 // 点击返回顶部
 2 $(window).scroll(function() {
 3   if ($(window).scrollTop() >= 100) {
 4     $(".goTop-hook").fadeIn(300)
 5   } else {
 6     $(".goTop-hook").fadeOut(300)
 7   }
 8 })
 9 
10 $(".goTop-hook").bind("click", function() {
11   $("html").animate({ scrollTop: 0 }, 300)
12 })

其中的要点为:

1.window滑动时,触发scroll事件,当scrollTop超过100px时,图标按钮淡入(FadeIn),否则淡出(FadeOut)。

2.当图标按钮被点击时,慢慢地回到顶部scrollTop=0处。

3.300为时间单位,一般默认单位为ms。

 

posted @ 2019-12-03 16:23  罗毅豪  阅读(798)  评论(0编辑  收藏  举报