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:;" 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---小火箭返回顶部案例的更多相关文章
- 第50天：scrollTo小火箭返回顶部
scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang=& ...
- 使用jQuery简单实现返回顶部的一个小案例
1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...
- JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）
点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- jQuery中页面返回顶部的方法总结
当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- javascript 缓动返回顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 小程序返回顶部top滚动
wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
随机推荐
- e.detail.value 获取input的值
inputId(e) { this.setData({ inputId: e.detail.value }) },
- 安卓开发实战-记账本APP（六）
记账本APP开发---终结篇 昨天的动态数字录屏奉上:在抖音上拍了一个(ps:欢迎点赞) https://v.douyin.com/poEjmG/ 今天将图表的内容进行了制作,我用的是MPChart的 ...
- QQ IP 地址查询相关
1.QQwry.dat格式分析和查询IP位置的PHP程序 以前的追捕数据库太大,而且很久没有更新了. 所以我想到利用QQwry.dat这个文件查询IP所在位置,QQwry.dat 在很多地方都能找到, ...
- SpringMVC基础(一)_控制器
Spring MVC Spring MVC 基于模型-视图-控制器(Model-View-Controller)模式实现,它能够帮你构建灵活和松耦合的应用程序. 1.Spring MVC的请求追踪 每 ...
- python 爬虫过程中出现：ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接
参考: https://blog.csdn.net/illegalname/article/details/77164521
- CCF_ 201403-3 _命令行选项
不要怀疑,这题跟CCF_201604-3_路径解析一样恶心,很多中情况,要仔细读题,注意细节. 写的比较乱. #include<iostream> #include<cstdio&g ...
- 《Python学习手册 第五版》 -第3章 你应如何运行Python程序
在这里,运行Python程序的前提是你的电脑已经配置Python相关的运行环境,如何配置可以通过本书的附件查看,也可以自行通过网络查询配置,在此不再赘述 运行一个Python程序,主要有6种方式 1. ...
- Golang设置https访问，以及http如何重定向到https
设置https访问: 原始代码为http监听: func main() { server := &http.Server{ Addr: ":8080", ... } go ...
- Go语言实现：【剑指offer】二叉树的下一个结点
该题目来源于牛客网<剑指offer>专题. 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回. 注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. Go语 ...
- Go语言实现：【剑指offer】从尾到头打印链表
该题目来源于牛客网<剑指offer>专题. 输入一个链表,按链表从尾到头的顺序返回一个ArrayList. Go语言实现: type ListNode struct { Val int ...