返回顶部demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<script src="js/jquery.js"></script>
<script src="js/test.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<div class="box bottom"></div>
<div class="location">
<p class="scroll_top">返回顶部</p>
<p class="scroll_a">产品介绍</p>
<p class="scroll_bottom">滑到底部</p>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.scroll_top').click(function() {
$('html,body').animate({
scrollTop: '0px'
}, 800);
});
$('.scroll_a').click(function() {
$('html,body').animate({
scrollTop: $('.a').offset().top
}, 800);
});
$('.scroll_bottom').click(function() {
$('html,body').animate({
scrollTop: $('.bottom').offset().top
}, 800);
});
});
</script>
</body>
</html>
返回顶部demo的更多相关文章
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- 简约的返回顶部效果（jQuery）
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
随机推荐
- Maven 排除第三方jar包所依赖的其他依赖
单依赖过滤:可以过滤一个或者多个,如果过滤多个要写多个<exclusion>. <dependency> <groupId>org.apache.hbase< ...
- HDU 1222
题意: 一头狼和一头兔子在一座山中,给你一个数n表示洞的个数,编号从0~n-1.兔子可以随意躲在其中一个洞中,狼每次都从编号为0的洞出发,接下来走到第m个洞中,问兔子能不能活下来,即不被狼吃掉.例如: ...
- ServiceStack V3 版本 免费 redis的操作类
Referencing v3 packages in New Projects If you want a new project to use ServiceStack's v3 packages ...
- CPU的大小端模式
不同体系结构的CPU,数据在内存中存放的排列顺序是不一样的. 存储器中对数据的存储是以字节(Byte)为基本单位的,因此,字(Word)和半字(Half-Word)在存储器中就有两种次序,分别称为:大 ...
- 006 复杂的数据类型&函数(方法)
2016-01-16 1.变量类型int double string char bool decimal变量的使用规则:先声明再赋值最后使用int number;number=10; number=2 ...
- Scala的第一步
第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...
- Object方法equals、hashCode
java知识背景: 1)hashCode()方法返回的是Jvm的32位地址 2)==比较的是对象在jvm中的地址 3)Object的equals()比较的就是jvm物理地址 4)比较2个对象使用equ ...
- js倒计时显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- ThinkPHP(3)SQL查询语句
ThinkPHP中对查询语句,包含了基本的查询方式.表达方式.快速查询.区间查询.组合查询.SQL查询.动态查询和子查询. 一.查询方式 ThinkPHP提供了三种基本的查询方式:字符串条件查询.索引 ...
- 使用NFC读卡器ACR122u读取银行卡信息
使用NFC读卡器 ACR122u 使用ACR122u Tool 软件发送spdu指令即可 一些运行结果 如上所示,银行卡的卡号,有效期,卡主姓名,身份证号,进期消费记录均可读出