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. 驱动中获取PsActiveProcessHead变量地址的五种方法也可以获取KdpDebuggerDataListHead

    PsActiveProcessHead的定义: 在windows系统中,所有的活动进程都是连在一起的,构成一个双链表,表头是全局变量PsActiveProcessHead,当一个进程被创建时,其Act ...

  2. loadrunner统计字符串中指定字符出现的次数

    Action() { char *str="sdfas1,sdfsdf2,sdfsdfsdfdsf3,sdfsdfsdfsdfds4,fsdfdsf5,sdfdsfsd6,fsdfsd7sd ...

  3. hdu 1203 概率+01背包

    I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  4. 2016.8.21 JavaScript 入门

    1.JavaScript的数据类型: ①undefined ②null ③boolean ④string ⑤symbol ⑥number,    object 2.在JavaScript中所有的变量和 ...

  5. Qt-note0906

    1.在Qt中每一个类都有一个与其同名的头文件: 2.任何一个Qt GUI程序都要有一个QApplication对象: 3.在默认情况下,新建的可视部件对象都是不可见的,要使用show()函数让它们显示 ...

  6. 我的c++学习(4) C++输入输出格式的控制

    默认进制:默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. #include &qu ...

  7. BestCoder Round #72 (div.2)

    后面的题目补不懂了 暴力 1001 Clarke and chemistry 这题也把我搞死了..枚举系数判断就行了 #include <cstdio> #include <algo ...

  8. [转载]Robotium API 翻译(三)——判断测试结果的方法assert、is、search

    该文来源于:http://blog.csdn.net/dongmu1986   下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.asser ...

  9. soapui中文操作手册(三)----使用SoapUI进行负载测试

    使用了SoapUI进行负载测试 负载测试是相当独特的,我们已经创建了一个功能,使您能够快速创建性能测试,并很容易地修改它们.SoapUI性能测试通常是从现有功能测试创建.这使您可以非常快速地创建先进的 ...

  10. 487-3279[POJ1002]

    487-3279 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 284182   Accepted: 51001 Descr ...