页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用。

  具体功能是,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的返回顶端的功能实现的更多相关文章

  1. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  2. jquery 返回顶端组件

    自己写了一个基于jquery的返回页面顶端的组件. (function($) { var g; $.backtop = function(options) { extend($.backtop.con ...

  3. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  4. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  5. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  6. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  7. ionic实现双击返回键退出功能

    实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让i ...

  8. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  9. jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. 3、循环链表(java实现)

    1.节点类 public class Node<T> { public T data; public Node next; } 2.实现类 public class CircularLin ...

  2. Hbase 统计表行数的3种方式总结

    有些时候需要我们去统计某一个Hbase表的行数,由于hbase本身不支持SQL语言,只能通过其他方式实现.可以通过一下几种方式实现hbase表的行数统计工作: 1.count命令 最直接的方式是在hb ...

  3. 今天遇到 Request failed: method not allowed (405)。 错误,特此在网上翻了翻

    Q1: 遇到405请求错误.提示:NSLocalizedDescription=Request failed: method not allowed (405).解决方案:405请求方法不被允许.这时 ...

  4. Linux 笔记 - 第十四章 LAMP 之(一) 环境搭建

    博客地址:http://www.moonxy.com 一.前言 LAMP 是 Linux Apache MySQL PHP 的简写,即把 Apache.MySQL 以及 PHP 安装在 Linux 系 ...

  5. Node.js之模块机制

    > 文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. ![file](https://img2018.cnblogs.com/blog/830272/20 ...

  6. js中Math对象常用的属性和方法

    1 Math对象 1.1定义:Math是js的一个内置对象,它提供了一些数学方法. 1.2特性:不能用构造函数的方式创建,无法初始化,只有静态属性和方法 1.3静态属性 1.3.1 Math.PI 圆 ...

  7. 配置hibernate访问mysql

    在之前搭建spring mvc项目这篇的基础上继续集成,引入hibernate支持 一.添加jar包引用 修改pom.xml文件,加入: <dependency> <groupId& ...

  8. Spring boot使用log4j打印日志

    先将maven中spring-boot-starter的日志spring-boot-starter-logging去掉 <dependency> <groupId>org.sp ...

  9. 在Docker中启动Cloudera

    写在前面 记录一下,一个简单的cloudera处理平台的构建过程和一些基本组件的使用 前置说明 需要一台安装有Docker的机器 docker常用命令: docker ps docker ps -a ...

  10. Spring Boot 简介与入门(2.1.6版)

    Spring Boot 2.1.6 版       与时俱进是每一个程序员都应该有的意识,当一个Java程序员在当代遍布的时候,你就该意识到能多学点什么.可观的是后端的框架是稳定的,它们能够维持更久的 ...