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 页面回到顶部的更多相关文章

  1. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  2. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  3. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  5. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  6. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  7. jQuery之回到顶部

    实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...

  8. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery-使页面回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 驱动开发之 创建线程函数PsCreateSystemThread

    PsCreateSystemThread 创建一个执行在内核模式的系统线程. 注意:创建线程必须用函数PsTerminateSystemThread强制线程结束.否则该线程是无法自动退出的. 函数原型 ...

  2. Java的静态导入

    静态导入作用是可以适当减少代码量,但实际上减少得很有限,实际应用中也用的不多,但是作为Java的特性,我们应该适当了解: //静态导入方法或者常量 import static java.lang.Sy ...

  3. css随记02布局

    布局 二栏布局 利用absolute, margin .container { position: relative; } nav { position: absolute; left: 0px; w ...

  4. Delphi 包的设计思想及它与PAS、BPL、DCU、DLL、OXC的关系。

    DCP ,BPL分别是什么文件,起什么作用?你在DELPHI中建立一个package然后保存一下,看看. bpl和Dll比较相似.只是BPL是BORLAND自己弄出来的东西!!!调用也和调用DLL相似 ...

  5. HDU-2159FATE(二维完全背包)

    FATE Problem Description 最 近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完 ...

  6. CF# Educational Codeforces Round 3 B. The Best Gift

    B. The Best Gift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  7. Storm DRPC实现机制分析

    DRPC是建立在Storm基本概念(Topology.Spout.Bolt.Stream等)之上的高层抽象,个人理解它的目标是在Storm 集群之上提供一种分布式的RPC框架,以便能够利用Storm快 ...

  8. HTML5与移动端web学习笔记

    HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...

  9. 【BZOJ】2172: Mario填格子

    题意 \(3 * 3\)的网格,给出左上角的数字\(m\)和右下角的数字\(m\),如果当前格子有数字\(x\),格子左边有个数字\(y\),格子上面有个数字\(z\),则\(y|x, z|x\).格 ...

  10. 【BZOJ3207】花神的嘲讽计划I 可持久化线段树/莫队

    看到题目就可以想到hash 然后很自然的联想到可持久化权值线段树 WA:base取了偶数 这道题还可以用莫队做,比线段树快一些 可持久化线段树: #include<bits/stdc++.h&g ...