jQuery实现小火箭返回顶部特效


Posted in jQuery onFebruary 03, 2020

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);
  });

整体代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  body {
   height: 8000px;
  }

  a {
   color: #FFF;
  }

  .actGotop {
   position: fixed;
   bottom: 50px;
   right: 50px;
   width: 150px;
   height: 195px;
   display: none;
   z-index: 100;
  }

  .actGotop a,
  .actGotop a:link {
   width: 150px;
   height: 195px;
   display: inline-block;
   background: url(images/gotop.png) no-repeat;
   outline: none;
  }

  .actGotop a:hover {
   width: 150px;
   height: 195px;
   background: url(images/gotop.gif) no-repeat;
   outline: none;
  }
 </style>


</head>

<body>
 <!-- 返回顶部小火箭 -->
 <div class="actGotop"><a href="javascript:;" rel="external nofollow" title="Top"></a></div>


 <script src="jquery-1.12.4.js"></script>
 <script>


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

  //在外面注册
  $(".actGotop").click(function () {
   $("html,body").stop().animate({ scrollTop: 0 }, 1000);
   //scrollTop为0
   // $(window).scrollTop(0);
  });
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php读取mysql的简单实例
2014/01/15 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jquery 使用简明教程
2014/03/05 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
JS打印组合功能
2016/08/04 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
详解python的ORM中Pony用法
2018/02/09 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
家属答谢词
2015/01/05 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python