使用 jQuery 页面回到顶部
function backTop() {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#topImg").fadeIn(1000);
}
else {
$("#topImg").fadeOut(1000);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#topImg").click(function () {
//考虑到兼容性使用 body 和 html
$('body,html').animate({ scrollTop: 0 }, 800);
return false;
});
}
CSS 样式和HTML中的跳转图片设置如下:
#topImg{
position:fixed;
right:15px;
bottom:30px;
display:none;
}
<img id="topImg" src="../images/top.PNG" />
使用 jQuery 页面回到顶部的更多相关文章
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
- jQuery之回到顶部
实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery-使页面回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Android中常用的五种数据存储方式
第一种: 使用SharedPreferences存储数据 适用范围: 保存少量的数据,且这些数据的格式非常简单:字符串型.基本类型的值.比如应用程序的各种配置信息(如是否打开音效.是否使用震动效果.小 ...
- 【hibernate】 hibernate的主键策略
今天使用maven生成一个sping+springMVC+hibernate 的项目,报错如下: 错误提示呢:不能解释这个id的生成策略[uuid.string].就是uuid.string这个hib ...
- POJ 2406 KMP/后缀数组
题目链接:http://poj.org/problem?id=2406 题意:给定一个字符串,求由一个子串循环n次后可得到原串,输出n[即输出字符串的最大循环次数] 思路一:KMP求最小循环机,然后就 ...
- 《DSP using MATLAB》示例Example4.9
收敛域在圆外,对应原始时间序列为右边序列. 上代码: b = 1; a = poly([0.9, 0.9, -0.9]); % compute the polynomials coefficients ...
- Redis 安装为Window服务
参考: http://www.cnblogs.com/zhoub/p/3841222.html 关键命令 redis-server.exe –service-install conf/redis.co ...
- ssl原理,非对称加密握手,对称加密传输
SSL的基本思想是用非对称加密来建立链接(握手阶段),用对称加密来传输数据(传输阶段).这样既保证了密钥分发的安全,也保证了通信的效率. SSL握手,单方服务器认证(一般的浏览器上网) SSL握手,双 ...
- Java类加载
类的生命周期是: 在一个类编译完成之后,下一步就需要开始使用类,如果要使用一个类,肯定离不开JVM.在程序执行中JVM通过装载,链接,初始化这3个步骤完成. 类的装载是通过类加载器完成的,加载器将.c ...
- iOS学习33之可视化编程-StoryBoard
1. storyBoard与xib 1> 概述 iOS下可视化编程分为两种方式: xib 和 storyboard 在使用 xib 和 storyboard 创建 GUI 过程中,以 XML 文 ...
- 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法
众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...
- Codeforces Round #216 (Div. 2) B. Valera and Contest
#include <iostream> #include <algorithm> #include <vector> using namespace std; in ...