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. Ubuntu14 搭载vim环境查看源码

    首先是下载完整的vim74,然后编译安装.遗憾的是当编译时,没有开启图形界面. 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get rem ...

  2. 【hibernate criteria】hibernate中criteria的完整用法 转

    ---恢复内容开始--- 转自:http://www.360doc.com/content/090313/10/26262_2794855.html 1.Criteria Hibernate 设计了 ...

  3. C语言补码作用

    补码主要是为了cpu运算器在进行减法运算时避免借位而设立的. 在早期,cpu中的运算器部分,只要实现一个加法器就可以完成四由算术运算. 因为计算机中的数值编码是有限位数的,所以减法实际上相当于加上减数 ...

  4. 01 HTML基础

    HTML就是超文本标记语言的简写,是最基础的网页语言. 通过标签定义的语言,代码都是由标签所组成的.(最重要的标签是定义标题.段落和换行的标签) 不区分大小写 head部分是给html页面增加一些辅助 ...

  5. Fibonacci

    20145218 <Java程序设计>第01次实验报告 实验内容 简单使用命令行 撰写简单的Hello.java程序,使用命令行编译.运行.编译命令javac -d Hello.java, ...

  6. dotnet core 初试两个小问题解决

    1. Setup has detected that visual studio 2015 update 3 may not be completely installed 在安装 DotNetCor ...

  7. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  8. 【Oralce】时间操作

    加法 select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1 ...

  9. django 模版语法及使用

    模版的定义 模版是一个文本,用语分离文档的表现形式和内容,通常用于生成html 模版当中能够使用的python语法非常少,for ,if 之类,还有ifequal,结束的时候也要写endifequal ...

  10. [linux]crontab 命令执行问题

    在服务器上设置了一个R脚本的crontab任务,死活不执行.在网上搜了很久,终于解决了. 这里主要说一下crontab异常时,该如何排查. 假设cron命令为:* * * * Rscript /you ...