使用 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 ...
随机推荐
- javascript概述
在我们进行javascript视频的时候,第一集,看到的学习要点: 1.什么是javascript? a.一种具有面向对象能力的.解释型的程序设计语言(直接读取运行,而非编译型) ...
- currentStyle
用js的style属性可以获得html标签的样式,但是不能获取非行间样式. 解决方法: 在IE下可以用currentStyle; 在FF下用getComputedStyle; 然而,为了让其兼容,解决 ...
- 各种编码问题产生原因以及解决办法---------响应编码,请求编码,URL编码
响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...
- Oracle常用命令
查看数据库锁的情况 SELECT object_name, machine, s.sid, s.serial# FROM gv$locked_object l, dba_objects o, gv$ ...
- 《DSP using MATLAB》示例Example4.10
上代码: b = [1, 0.4*sqrt(2)]; a = [1, -0.8*sqrt(2), 0.64]; % compute the polynomials coefficients given ...
- 关于Ue4的深度模板
http://www.unrealchina.net/forum.php?mod=viewthread&tid=100234
- Wordpress如何开启用户注册功能
登录你的Wordpress管理员帐号,并进入管理后台,点击左侧菜单栏的"设置"--"常规" 在打开的设置页面,下方找到"允许任何人注册" ...
- Parameter of Revit API – 19: Add FamilyParameter (FamilyManager.AddParameter)
New family parameters (FamilyParameter) can be added to a family document through the FamilyManage ...
- 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具
http://www.cnblogs.com/lhb25/archive/2012/09/11/resources-that-complement-twitter-bootstrap.html
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...