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的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- Linux 笔记 - 第十一章 正则表达式
博客地址:http://www.moonxy.com 一.前言 正则表达式(英语为 Regular Expression,在代码中常简写为 regex.regexp 或 RE),是使用单个字符串来描述 ...
- jmeter 命令压测生成报告
1.本地复制到远程 scp -r local_folder remote_username@remote_ip:remote_folder 或者 scp -r local_folder remote_ ...
- Tomcat部署spring boot项目
Tomcat部署spring boot项目 需要在启动类做修改
- go语言 链表练习
package main import "fmt" //定义节点 type Node struct { Data int Next *Node } /* * 返回第一个节点 * h ...
- 讨厌的Permission denied:adb访问手机目录时,怎么处理Permission denied问题
故事背景 手机某app出现了无响应,我想找到手机anr日志 但我只知道在data目录的某个目录里有个tra**的文件里有anr日志 具体的我真忘了,所以想要进入data中用ls查看一下 结果就出现了讨 ...
- centos文件解压缩7z
1.7z 安装 yum install p7zip 压缩test文件夹生成test.7z 7za a -t7z -r test.7z test #a 代表添加文件/文件夹到压缩包 -t 是指定压缩类型 ...
- 如何在女友卸妆后,正确的找到她?---java中使用反射的小秘密
故事背景 小白是个程序猿,刚毕业两年,最近交了一个女朋友,是同事介绍的.女朋友和闺蜜住在一起.小白早上很早接到女朋友电话,昨天她的一个文件错放到了他的电脑包,希望他帮忙送到她住的地方,她今天要向她bo ...
- Python学习笔记整理总结【Django】:Model操作(一)
Model操作(一) 一.Django ORM基本配置 ORM:关系对象映射(Object Relational Mapping,简称ORM)db Frist:到目前为止,当我们的程序涉及到数据库相关 ...
- WebGL简易教程(五):图形变换(模型、视图、投影变换)
[toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...
- Python爬虫(二):Requests库
所谓爬虫就是模拟客户端发送网络请求,获取网络响应,并按照一定的规则解析获取的数据并保存的程序.要说 Python 的爬虫必然绕不过 Requests 库. 1 简介 对于 Requests 库,官方文 ...