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-data的三种用法
Apr 18 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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 socket的讲解与实例分析
2013/06/13 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
建筑专业自荐信范文
2014/01/05 职场文书
成人继续教育实施方案
2014/03/01 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
环保倡议书100字
2014/05/15 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
班主任自我评价范文
2015/03/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
python文件目录操作之os模块
2021/05/08 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技