代码: 返回页面顶部 jquery
jquery代码: 返回页面顶部
- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $(".go-top").click(function () {
- $(document.body).animate({scrollTop: 0}, 800);
- return false;
- });
- //滚屏
- $(window).scroll(function() {
- if($(document.body).scrollTop()>$(window).height()){
- //滚动高度大于(第一屏)页面高度,才显示
- $(".go-top").show();
- goTopTimer = setTimeout(function(){
- $(".go-top").hide();
- }, 2000);//1000毫秒
- }
- });
- });
- </script>
- <style type="text/css">
- body{height:5000px;background:url("http://s.cn.bing.net/az/hprichbg/rb/CrestedPigeon_ZH-CN11090922142_1920x1080.jpg");}
- .go-top{position:fixed;right:1em;bottom:1em;background:#000;color:#fff;padding:1em;cursor:pointer;display:none;border-radius:5px;}
- </style>
..
代码: 返回页面顶部 jquery的更多相关文章
- backtop返回页面顶部jquery代码
<div id="toTop" style="width:30px;height:110px;border:1px solid #74B9DC; border-ra ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)解决点击a标签返回页面顶部的问题
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...
- 解决点击空<a>标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery返回页面顶部
1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...
随机推荐
- kafka日志同步至elasticsearch和kibana展示
kafka日志同步至elasticsearch和kibana展示 一 kafka consumer准备 前面的章节进行了分布式job的自动计算的概念讲解以及实践.上次分布式日志说过日志写进kafka, ...
- 《DSP using MATLAB》Problem 3.20
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Flask, Tornado, GEvent组合运行与性能比较
我在选一个python的互联网框架, 本来已经定下来用Tornado了. 但我还听到很多人推荐Flask的简单性和灵活性, 还有gevent的高性能, 所以决定也试试它们以及它们和Tornado的结 ...
- .gitignore忽略git版本库中的文件(夹)
# 忽略*.o和*.a文件 *.[oa] # 忽略*.b和*.B文件,my.b除外 *.[bB] !my.b # 忽略dbg文件和dbg目录 dbg # 只忽略dbg目录,不忽略dbg文件 dbg/ ...
- 转 Apache Kafka:下一代分布式消息系统
简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...
- Google Android API官网封杀了,没法查android技术资料的3种解决方式
1.从uhdesk上訪问简化版android api在线文档(反应速度极快) http://www.uhdesk.com/simpleandroidoc/index.html 2.下载chm本地文 ...
- JSP指令include和JSP动作元素include的区别
include指令用于在JSP页面静态的包含一个文件,该文件可以是JSP页面.HTML页面.文本文件或者一段java代码.使用include指令的JSP页面在转换时,JSP容器会在其中插入所包含文件的 ...
- spring cloud 知识点
优秀的介绍资料: 资料 地址 spring cloud 中文网 https://springcloud.cc/ spring cloud 介绍 https://www.jianshu.com/p/74 ...
- gitlab怎么删除创建的项目
在gitlab新建了一个项目,怎么将此项目删除呢?打开这个工程,点击右上角的“settings”拉到最下面,有个show them to me,点击~在下拉选项的最后,有个remove框,点击即可以彻 ...
- MariaDB管理系统
MariaDB管理系统 [root@c4kaichen@163 ~]# yum install mariadb[root@c4kaichen@163 ~]# yum install -y mariad ...