jQuery如何实现小火箭返回顶部特效-创新互联

这篇文章将为大家详细讲解有关jQuery如何实现小火箭返回顶部特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注于企业全网营销推广、网站重做改版、肇州网站定制设计、自适应品牌网站建设、H5高端网站建设、成都做商城网站、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为肇州等各大城市提供网站开发制作服务。

jquery实现小火箭返回顶部案例，供大家参考，具体内容如下

1. 滚动页面，当页面距离顶部超出1000px，显示小火箭。

封装在scroll函数里，当前页面距离顶部为$(window).scrollTop >=1000

小火箭显示和隐藏用fadeIn和fadeOut

//当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏
   $(window).scroll(function () {
    if ($(window).scrollTop() >= 1000) {
     $(".actGotop").stop().fadeIn(1000);
    } else {
     $(".actGotop").stop().fadeOut(1000);
    }
   })
});

2. 当小火箭出现后，点击小火箭，返回到页面顶部。

在外面出册点击事件，获取页面，html或者body, 返回用animate动画函数，到顶部即scrollTop为0，时间可以设置

$(".actGotop").click(function () {
   $("html,body").stop().animate({ scrollTop: 0 }, 1000);
  });

3. 如果要让小火箭点击后，直接回到顶部，可以只设置$(window).scrollTop(0)，既可

$(".actGotop").click(function () {
   //$("html,body").stop().animate({ scrollTop: 0 }, 1000);
   //scrollTop为0
   $(window).scrollTop(0);
  });

整体代码如下：