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 06 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python list与NumPy array 区分详解
2019/11/06 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Python加速程序运行的方法
2020/07/29 Python
python计算auc的方法
2020/09/09 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
摄影助理岗位职责
2014/02/07 职场文书
校园演讲稿汇总
2014/05/21 职场文书
办公用品管理制度
2015/08/04 职场文书