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 ...
随机推荐
- SpringBoot图文教程「概念+案例 思维导图」「基础篇上」
有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 每个知识点配套自测面试题,学完技术自我测试 本文初学向,所以希望文中所有的代码案例都能敲一遍 大哥大姐 ...
- WTL设置对话框背影色
MainDlg.h // MainDlg.h : interface of the CMainDlg class // //////////////////////////////////////// ...
- 洛谷P1649 【[USACO07OCT]障碍路线Obstacle Course】
题目描述 Consider an N x N (1 <= N <= 100) square field composed of 1 by 1 tiles. Some of these ti ...
- POJ_1042_贪心
题目描述: 每组数据给你n个胡,h小时时间,每个湖一次可钓鱼数量,每个湖每次钓鱼后下次可钓鱼数量的减少量,从每个湖到下一个湖所需时间.求最大钓鱼量. 要注意的是,刚开始在第一个湖,每次移动只能往下一个 ...
- 《Python学习手册 第五版》 -第12章 if测试和语法规则
本章节的内容,主要讲解if语句,if语句是三大复合语句之一(其他两个是while和for),能处理编程中大多数逻辑运算 本章的重点内容如下: 1.if语句的基本形式(多路分支) 2.布尔表达式 3.i ...
- 13-MyBatis03(逆向工程)
MyBatis逆向工程 1.导入jar包 <dependency> <groupId>org.mybatis</groupId> <artifactId> ...
- Postman之命令测试
前言 今天我们来学习一下Postman的命令行测试 1.先安装node.js ,https://nodejs.org/en/#home-downloadhead 2.安装cnpm npm instal ...
- 网络设备 密码、用户级别 AAA授权 的管理
一.进入 特权模式 密码 设置访问网络设备特权模式口令 cisco>enable cisco#config terminal cisco(config)#enable password 密码 e ...
- FastDFS 配置文件 tracker.conf
FastDFS 版本5.05 配置文件分为三部分 控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfs 基本配置(基础配置 ...
- SELinux 和 iptables 开启关闭
SELinux 是 2.6 版本的 Linux 内核中提供的强制访问控制(MAC)系统.对于目前可用的 Linux安全模块来说,SELinux 是功能最全面,而且测试最充分的,它是在 20 年的 MA ...