jQuery---小火箭返回顶部案例
2024-10-08 08:19:17
小火箭返回顶部案例
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:;" 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>
最新文章
- 用大白话聊聊JavaSE -- 如何理解Java Bean（一）
- 获取linux服务器基本信息脚本
- 如何在 IDEA 中使用Maven 及 相应插件
- NYOJ：题目524 A-B Problem
- f2fs解析（八）node 管理器中的node_info
- MYSQL数据库性能调优之三：explain分析慢查询
- C++11多元组类别
- July-程序员面试、算法研究、编程艺术、红黑树、数据挖掘5大经典原创系列集锦与总结
- python学习之路-10 网络编程之进阶
- mybatis判断集合为空或者元素个数为零
- FFT模板（多项式乘法）
- Android调试工具之ADB
- Scala编程入门---面向对象编程之Trait高级知识
- docker container 互联
- java中 this() 和super()的作用及用法
- Python：Day18 os模块、logging模块、正则表达式
- P1601 A+B Problem（高精）
- luogu 1850 换教室 概率+dp
- 40+ 个非常有用的 Oracle 查询语句
- CPP_运算符重载及友元