这篇文章主要介绍了使用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创建平滑滚动效果的更多相关文章

  1. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  2. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  4. 使用jQuery实现向上循环滚动效果（超简单）

    今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...

  5. 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...

  6. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

  7. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  8. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. Jquery——简单的视差滚动效果，兼容PC移动端

    $(function(){     $(window).scroll(function(){         var top=$(this).scrollTop();        $(". ...

随机推荐

  1. MongoDB 副本集管理（不定时更新）

    简介: 前面介绍完了副本集的搭建.用户的管理.参数和日常操作的说明,那副本集搭建好该如何管理呢?现在来说明下副本集的日常查看和管理. 说明: 1)查看命令行参数:db.serverCmdLineOpt ...

  2. java基础学习05(面向对象基础01)

    面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...

  3. 【python】入门学习（六）

    type() #检查变量或值得数据类型 >>> type(5) <class 'int'> 序列:包括字符串.元组和列表.序列都可以用索引.切片.len()(计算元素个数 ...

  4. 【编程题目】栈的 push、pop 序列

    29.栈的 push.pop 序列(栈)题目:输入两个整数序列.其中一个序列表示栈的 push 顺序,判断另一个序列有没有可能是对应的 pop 顺序.为了简单起见,我们假设 push 序列的任意两个整 ...

  5. myEclipse中改了项目名，出现的问题 和 错误java.io.IOException: tmpFile.renameTo(classFile) failed

    今天遇到一个很头疼的问题,建的一个新项目,后来因为一些原因把项目名改了,之后就做了一些业务,但运行时总是没有反应,后来在myEclipse工作空间下的webapps文件中发现, 部署的文件名和项目名称 ...

  6. iOS 系统消息

    转载自:http://momirror.blog.163.com/blog/static/48418184201361541235481/ 一.键盘 1.UIKeyboardWillShowNotif ...

  7. php策略模式的研究

    <?php abstract class Moshi{     private $num;     public $price;     const Ted=1;     const Sed=2 ...

  8. struts2响应AJAX

    1发送ajax请求使用stream进行响应 Result的type属性的stream取值. 1.1定义Action public class UserAction { private String u ...

  9. 22中编程语言的HelloWorld

    C:printf("HelloWorld"); C++ : cout<<"HelloWorld"; QBasic : Print "Hel ...

  10. 使用 ODBC .NET 提供程序和 Visual C# .NET 执行 SQL 参数化存储过程

    http://support2.microsoft.com/kb/310130/zh-cn 此分步指导文章描述如何使用 ODBC .NET 托管提供程序和 Visual C# .Net 调用参数化 S ...