返回顶部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满地跑的页面实际开发中,有啥用 ...
随机推荐
- 安卓自动化测试：Android studio 自带的 Record Espresso Test || [ Appium & (Android studio || Python|| Eclipse ) ]
1.Android studio 自带的 Record Espresso Test https://developer.android.com/studio/test/espresso-test-r ...
- Python Day03
set Collections系列: Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collections模块在这些内置数据类型的基础上,提供了几 ...
- 使用 MySQL 查找附近的位置
使用 MySQL 查找附近的位置 以下 SQL 语句将会在与坐标 37, -122 相距 25 英里的半径范围内查找最近的 20 个位置.该语句根据行的纬度/经度以及目标纬度/经度计算距离,然后只请求 ...
- webView与OC的交互
layout: post title: webView 的 iOS 与 js 交互 subtitle: iOS 与 js 交互的几种方式 author: manajay date: 2016-05-3 ...
- Unity3D之C# yield waitforseconds
Wait for seconds requires a couple things in order to work properly and chances are if it's not work ...
- 【转】关于Jquery中ajax方法data参数用法的总结
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...
- c++中变量声明和变量定义的区别。2016年12月6日
整个流程: 1.程序告诉cpu,程序将要使用一个变量.(暂时不一定用到,先说一下.) 2.程序告诉CPU,程序现在就要使用一个变量.(现在就用) 3.cpu按照这个变量的类型,把内存划分出几个单位(b ...
- ibatis入门教程
转载自 http://www.cnblogs.com/ycxyyzw/archive/2012/10/13/2722567.html iBatis 简介: iBatis 是apache 的一个开源项 ...
- jquery mobile上传图片完整例子（包含ios图片横向问题处理和C#后台图片压缩）
上传图片本身是个基本的小功能,但是到了移动端就不那么简单了,相信找到这篇文章的你一定有深深的同感. 本文实例是:在(移动端)页面中点击图片,然后选择文件,然后保存.使用Asp.net 难点一:后台获取 ...
- javascript的实践
jQuery增强了css的选择器功能,是一个简洁快速的脚本库,能够使用短小的代码实现复杂的网页预览效果.如实现表格奇偶行异色 <script language="javascript& ...