【JavaScript&jQuery】返回顶部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px; height:200px;background:#ccc; margin:10px auto;}
.top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}
.top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<div class = "top">
<span></span>
</div>
<script type = "text/javascript">
//返回顶部的小图标的现隐
$(window).scroll(function(){
if($(window).scrollTop() >= 100){
$(".top").fadeIn(600);
}else{
$(".top").stop(true,true).fadeOut(600);
}
});
//返回顶部
$(".top").click(function(){
$("html,body").animate({
scrollTop:0
},800);
});
</script>
</body>
</html>
【JavaScript&jQuery】返回顶部的更多相关文章
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- jquery返回顶部,支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- JavaScript之返回顶部
为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- Jquery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
随机推荐
- stardict词库
http://download.huzheng.org/zh_CN/ sudo tar -jxvf * -C /usr/share/stardict/dic
- css图片文字一排
<div class="footer1"> <div class="vercital-head"></div><!-- ...
- tomcat如何禁止显示目录和文件列表
打开 tomcat的安装目录/conf/web.xml 文件 找到: <servlet> <servlet-name>default</servlet-name& ...
- 银行业务-Excel文件的拆分逻辑
一.问题: 随着银行业务数据量的急剧增加,原始的人力统计数据已经不能满足要求, 需要开发一款可以实现自动化数据统计的系统平台,进行数据的采集.加工.过滤.统计.预测 其中数据采集方式又以[Excel] ...
- Docker入门篇(二)之docker的单主机网络
Docker 安装时会自动在host上创建三个网络,我们可用 docker network ls命令查看: [root@localhost ~]# docker network ls NETWORK ...
- js中对象转化成字符串、数字或布尔值的转化规则
js中对象可以转化成 字符串.数字.布尔值 一.对象转化成字符串: 规则: 1.如果对象有toString方法,则调用该方法,并返回相应的结果:(代码通常会执行到这,因为在所有对象中都有toStrin ...
- testNG-失败用例重跑机制
下面简单介绍下testNG的失败重跑的实现方法: 1.首先编写一个类,实现IRetryAnalyzer类,重写其中的retry方法. public class TestNGRetry implemen ...
- vue异步分页+初始化页面
html代码: <section class="container page-home"> <div id="main-content" cl ...
- Linux 安装Zookeeper<集群版>(使用Mac远程访问)
阅读本文需要先阅读安装Zookeeper<准备> 一 架构细节 zookeeper集群根据投票选举的机制 选出leader和follower zookeeper集群节点建议是奇数 这里我准 ...
- and_or_not 逻辑运算符的操作注解!
python操作: