返回顶部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满地跑的页面实际开发中,有啥用 ...
随机推荐
- 使用VMware Workstation 12.5.2新建虚拟机
关于VMware版本:VMware10可以支持32位和64位操作系统,VMware11及以上版本只能支持64位Win7及以上版本的操作系统!同时,VMware Workstation 10.0正式版发 ...
- Unity3d获取APK签名及公钥的方法
在Unity3d项目中获取APK包签名公钥的方法,核心思想就是通过JNI调用Android提供的方法.不过Unity3d提供了比JNI更上一层的类AndroidJavaObject以及继承它的Andr ...
- 第八篇.Bootstrap下拉菜单
给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...
- what we do and how we behave
It comes after a report last week revealed the "brutal" treatment of terror suspects by th ...
- odi 12.2.1.1新特性
ODI 12.2.1.1现在已经发布,也可以OTN上下载,主要变化: Hyperion Essbase and Hyperion Planning 知识模块 Hyperion Essbase and ...
- Android开源框架：Universal-Image-Loader解析（二）MemoryCache
- C语言程序设计第12次作业
一.本次课主要内容: 本章主要介绍指针相关的基础知识,本节课的主要如下 (1)通过示例"电码加密"引入字符指针与字符串处理.首先重点介绍字符指针和字符串的关联和区别,然后对常用字符 ...
- linux-命令-ls
一.命令介绍: ls命令是linux常用的命令之一.ls用来打印当前目录的文件清单或指定目录的文件清单,也可以查看到文件的基本权限和隐藏文件. 二.命令格式: ls [OPTION]... [FILE ...
- POJ1584 判断多边形是否为凸多边形，并判断点到直线的距离
求点到直线的距离: double dis(point p1,point p2){ if(fabs(p1.x-p2.x)<exp)//相等的 { return fabs(p2.x-pe ...
- Android 开发常用命令
1.生成keystore文件 keytool -exportcert -keystore keystore_path -list -v 2.查看APK签名 keytool -list -printce ...