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实现文字打印动态效果
Apr 21 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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 缓存函数代码
2008/08/27 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python3对接mysql数据库实例详解
2019/04/30 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
考研英语复习计划
2015/01/19 职场文书
大学四年个人总结
2015/03/03 职场文书
工会积极分子个人总结
2015/03/03 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL