【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部、到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下
滚动到顶部：
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
滚动到指定位置：
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
完整实例源码参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js平滑滚动到顶部、底部、指定地方</title>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style>
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
</style>
</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"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></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">
jQuery(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>
【转】使用jquery animate创建平滑滚动效果的更多相关文章
- 利用jquery实现向左滚动效果及offset的使用
昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:
- 使用jquery animate实现锚点慢慢平滑滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 使用jQuery实现向上循环滚动效果（超简单）
今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...
- 使用JQuery.slideBox实现图片滚动效果
1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...
- Jquery 实现banner图滚动效果
html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...
- jquery实现文字上下滚动效果
文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- Jquery——简单的视差滚动效果，兼容PC移动端
$(function(){ $(window).scroll(function(){ var top=$(this).scrollTop(); $(". ...
随机推荐
- Android SDK打包
2015年6月18日 14:38:49 星期四 eclipse: 1. 将写好的代码上传版本库 2. 删除 /bin/* 3. eclipse->project->clean... 4. ...
- 数学软件 之 基于MATLAB的DFP算法
DFP算法是本科数学系中最优化方法的知识,也是无约束最优化方法中非常重要的两个拟Newton算法之一,上一周写了一周的数学软件课程论文,姑且将DFP算法的实现细节贴出来分享给学弟学妹参考吧,由于博客不 ...
- static 修饰内部类
static一般用来修饰成员变量或函数也修饰代码块,一般不能修饰类,但是可以修饰内部类,被修饰的内部类可以直接作为一个普通类来用,不需要创建一个外部类的实例,而普通内部类的引用需要创建一个外部类的实例 ...
- 类型转换辅助工具类TypeCaseHelper
package org.sakaiproject.util; import java.math.BigDecimal; import java.sql.Date; import java.sql.Ti ...
- iOS runtime 的经典作用
- php数据访问（查询）
查询:常用关键字查询 和 准确查询 单条件查询 创建添加查询元素 <br /> <form action="main.php" method="post ...
- yii 多模板
main.php: //替换所有模板 //加载文件名为first的模板 // 'theme'=>'theme1', 'components'=>array( ...
- [Android Pro] Android打包一个Apk后，如何查看它的VersionCode、VersionName 等等。
Android打包成Apk后,其实是一个压缩文件,我们用winrar打开也能看到里面的文件结构.还能看到AndroidManifest.但是里面的内容有点问题. 不知道是因为加密还是Android就是 ...
- mysql编码设置
一:mysql字符集 mysql的字符集支持(Character Set Support)有两个类型:字符集(Character set)和连接校对(Collation).对于字符集的支持细化到四个层 ...
- 两个viewport的故事（第一部分）
原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如< ...