jquery的返回顶端的功能实现
页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用。
具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失。
实现效果如下图:
aaarticlea/png;base64,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" alt="" />
1.布局:
<a id="toTop" class="toTop" href="#"></a>
2.css代码:
.toTop{
position: fixed;
right: 40px;
bottom: 14px;
width: 40px;
height: 40px;
overflow: hidden;
display: none;
background: url(../images/to-top1.png) no-repeat 0px 0px;
}
3。jquery代码:
<script type="text/javascript">
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){if ($(window).scrollTop()>){
$("#toTop").fadeIn();
}
else
{
$("#toTop").fadeOut();
}
});
//当点击跳转链接后,回到页面顶部位置
$("#toTop").click(function(){
$('body,html').animate({scrollTop:},);
return false;
});
});
</script>
既然随笔必须150字,就写一些我之后想总结的东西吧。前端就是H5和js和jquery的深度学习及bootstrap框架的掌握;后端就是java的框架了,因为之前一直搞php,asp.net,现在想把java学深点。
jquery的返回顶端的功能实现的更多相关文章
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
- jquery 返回顶端组件
自己写了一个基于jquery的返回页面顶端的组件. (function($) { var g; $.backtop = function(options) { extend($.backtop.con ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- ionic实现双击返回键退出功能
实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让i ...
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
- jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- HBase 官方文档0.90.4
HBase 官方文档0.90.4 Copyright © 2010 Apache Software Foundation, 盛大游戏-数据仓库团队-颜开(译) Revision History Rev ...
- spring mvc Response header content type
Xml代码 <bean class ="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAd ...
- Servlet实现用户登录
1.登录过程分析: 通过表单收集用户的数据,Servlet通过request对象获得用户提交的数据,服务器还需要从数据库中通过sql语句查询有没有表单提交的数据中的用户.有则登录成功,否则,登录失败. ...
- 即时聊天APP(三) - 注册和登陆
注册和登陆大多都是一些用户名和密码的验证,所以放在一起写,注册代码: String account = accountEdit.getText().toString().trim(); String ...
- Linux 中 Xampp 的 https 安全证书配置
博客地址:http://www.moonxy.com 一.前言 HTTP 协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的 HTTP 的 ...
- 构建企业级数据湖?Azure Data Lake Storage Gen2实战体验(中)
引言 相较传统的重量级OLAP数据仓库,“数据湖”以其数据体量大.综合成本低.支持非结构化数据.查询灵活多变等特点,受到越来越多企业的青睐,逐渐成为了现代数据平台的核心和架构范式. 因此数据湖相关服务 ...
- 章节十六、10-TestNG报告和日志
一.在进行自动化的过程中,日志一般采用log4j 2进行日志记录,但TestNG自己本身也带有日志记录功能(reporter),它的好处在于日志中记录的内容都是testng自动生成的. package ...
- Spring Boot + WebSocket 学习笔记
首先需要了解一下背景,什么是WebSocket以及为什么要用WebSocket. 在常见的Web应用中,客户端与服务器通信,都是通过HTTP协议进行通信,客户端一次请求,服务端一次响应.而WebSoc ...
- Containers vs Serverless:你选择谁,何时选择?
两者都是当今技术时代的热门话题,也都被视为是开发技术的竞争对手. 首先,还有相当多的好奇和担心.此外,两者都是可供工程师使用的.高效的.机器无关的抽象. 但是,在冠军之间,有一个不可逾越的鸿沟.你要么 ...
- [sonarqube的使用] sonarqube安装
一 . SonarQube代码质量检查工具简介 Sonar (SonarQube)是一个开源平台,用于管理源代码的质量 Sonar 不只是一个质量数据报告工具,更是代码质量管理平台 支持Java, C ...