使用 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 ...
随机推荐
- opengl常用函数
glAccum 操作累加缓冲区 glAddSwapHintRectWIN 定义一组被 SwapBuffers拷贝的三角形 glAlphaFunc允许设置alpha检测功能 glAreTex ...
- Eclipse中Ctrl+方法名发现无法进入到该方法中……
我现在的情况是,按住Ctrl点击该方法后,发现进入不到这个方法的定义. 后来我发现,是因为这个项目是在某个项目文件夹中,如下: 这时直接找到server这个项目就没有问题了,如图:
- PhpMyAdmin管理,登录多台远程MySQL服务器
法一: 可直接在config.inc.php里添加数据库连接信息即可 先$i++, 然后复制原来的配置信息后修改 不过这种方式需要将连接信息写在配置文件中,有点麻烦. 这种后面省事,不用填信息,选择一 ...
- caffe安装(linux)
从官网github下载caffe-master.zip 解压:unzip caffe-master 将Makefile.config.example复制,命名为Makefile.config(如果是C ...
- junit单元测试中私有方法测试
1.单元测试可以对系统逻辑进行每个单元模块的测试. 2.单元测试也可以作为回归测试的依据,可以避免升级完善功能时引入问题. 3.单元测试要求将代码写的更清晰,更易于测试. 4.有时单元测试需要测试私有 ...
- 04_Java面向对象特征之继承与多态
1. 继承 Java继承的实现(只支持单继承,而不是多继承,但有接口的多实现) 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类. 定义类时直接通过extends关键字指明要继承的父类.子类对 ...
- uva 12003 分块
大白上的原题,我就练练手... #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ; ll blo ...
- sprint3冲刺第二天
队友: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...
- js 数组(Array)
一.数组 稠密数组(非稀疏数组) 稀疏数组 二.数组的添加和删除 我们已经常见过添加数组元素最简单的方法:为新索引赋值;也可以使用push()方法在数组末尾增加一个或者多个元素: a = []; a. ...
- The StringFormat property
As we saw in the previous chapters, the way to manipulate the output of a binding before is shown is ...