使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）

zhaoxinglei00 2014-05-27

采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用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>
zhaoxinglei00

zhaoxinglei00

相关推荐

Understanding jQuery animate() function

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate f

钱多多 / 0评论 2013-05-29

jquery animate()方法 语法

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画。大理石平台怎么样字符串值无法创建动画（比如 " padding: 0px 10px; -webkit-tap-highl

89463661 / 0评论 2019-12-04

jQuery之模拟实现$().animate()（上）

<!DOCTYPE html>. <div id="A" style="width:100px;height:50px;background-color: deeppink">这是A</

suis / 0评论 2019-11-16

jQuery源码解析之$().animate()（上）

// Operate on a copy of prop so per-property easing won't be lost. var opt = speed && typeof speed === "object"

LingPF / 0评论 2019-11-08

滚动屏幕时显示动画效果

Css3的animate动画库能设置滚动屏幕的时候显示动画效果吗？③全屏滑动一般用在官方网站使用较多这种效果，有很多插件可以实现这种效果，像swiper,fullpage,iscroll等

王福朋 / 0评论 2018-02-28

学习记录jQuery的animate函数

很久之前就对jQuery animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：。从参数名隐约可以推

CandyGoo / 0评论 2014-08-19

jquery的animate无法支持transform属性的解决方案

今天有个同事问了道问题，jquery的动画想实现转换类效果，发现无效。。。}) 在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用。注意：该方法只支持rotate的2D旋转，无法实现rotateX、rotateY、rotat

84483065 / 0评论 2019-03-25

浅谈jQuery的animate控制背景颜色

最近讲到jquery的animate()动画效果，但是注意到无法操控背景色改变，，，，，这个以前还真没注意过。需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不

limengmeng00 / 0评论 2018-08-22

AngularJs中ng-repeat指令的默认animate动画

但是没想出来时为什么，开始以为数据或数组操作出问题，搞了很长时间没搞明白。结果一步一步删代码发现问题出在引入的animate包身上。原来ng-repeat指令在引入animate的情况下自动调用ng-enter,ng-leave等class。$animat

CrazyDogWang / 0评论 2017-02-14

jquery animate()动画 函数 学习

// 你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。规定产生动画效果的一个或多个 CSS 属性/值。"swing" - 在开头/结尾移动慢，

无情 / 0评论 2015-06-25

css3动画2 transition 详解（共含有transform transition animate）

CSS3 Transition详解 几个让人头大的单词，可能会混淆，尤其是你过一段不用的话肯定会搞不清各自的意思。transition 今天主要说transition 中文意思过渡，顺便在说一下transform 和translate,transform

liusure0 / 0评论 2015-06-11

css3动画1 transform 详解（共含有transform transition animate）

Transform学习2D转换 图形变换我们能看到的要么是2D的平面变换，还有就是3D的立体变换，当我们看到这些词的时候，“平移”，“旋转”，“拉伸” 这种都是输入2D变换的范畴，转换导致的结构那就是，位置，形状，尺寸等等的改变。transform 英文

zyhui / 0评论 2015-06-10

jquery动画效果animate()和fadeTo()

fadeTo()方法：将被选元素的不透明度逐渐地改变为指定的值。animate()方法：创建自定义动画。必需的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。可选的callback参数是动画完成后所执行的函数名称。//把 &l

富贵 / 0评论 2015-01-16

Understanding jQuery animate() function

Understanding jQuery animate() functionjQuery animate() function is very powerful API to manipulate html elements and add animat

zhangmingming / 0评论 2013-05-29

jquery animate图片模向滑动示例

jqueryanimate()用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默

XiaoSpring / 0评论 2011-01-24

jQuery 实例

你想增进 jQuery 技能吗？演示 jQuery 的 hide() 函数，隐藏所有 &lt;p&gt; 元素。演示 jQuery jQuery click() 事件.jQuery toggle() 用于切换 hide() 和 show()

Haoroid / 0评论 2018-01-16

jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格

natineprince / 0评论 2017-03-15

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样

87244857 / 0评论 2019-05-08

原生js仿jquery animate动画效果

.box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}. var flag=tru

natineprince / 0评论 2016-07-13

浅谈原生JS实现jQuery的animate()动画示例

本文介绍了浅谈原生JS实现jQuery的animate()动画示例，希望此文章对各位有所帮助。必须为每一个元素分别添加一个定时器，否则会互相影响。= css[arr]判断是否每一个属性已经达到目标值。因此，在每次改变前初始化flag为true，只要遇到一个

TommyOnee / 0评论 2017-03-08

jQuery实现立体式数字动态增加（animate方法）

<div class="integral">已有<span class="ii"></span>积分</div>2、js

梦回forever / 0评论 2016-12-21

jQuery中animate的几种用法与注意事项

animateparams:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}. 用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。为了能影响元素top、right、bottom、left属性值必须声明元素的po

89387046 / 0评论 2016-12-12

jQuery使用animate实现ul列表项相互飘动效果示例

本文实例分析了jQuery使用animate实现ul列表项相互飘动效果。分享给大家供大家参考，具体如下：。//开始飘动的位置,由于ulRight的margin-left为300px所以要加300,同理leftUl也一样

88403369 / 0评论 2016-09-15

利用jQuery的动画函数animate实现豌豆发射效果

豌豆射手，草坪还有子弹都是现成的图片，jQuery可以说是现在最流行的一个js类库，而非框架。我深以为然，字面意思大概就是你可以无约束地使用类库，却需要在各种限制条件下使用一个框架。我私以为，js 库指的是直接和document文档元素交互的一个API，你

ouou00 / 0评论 2019-04-26

浅谈jQuery animate easing的具体使用方法(推荐)

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate有四个参数：。duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串或表示动画时长的毫秒数值。其中参数easing默认有两个效果："linea

gxr / 0评论 2019-04-26

jQuery animate easing使用方法图文详解

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate有四个参数：。duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串或表示动画时长的毫秒数值。其中参数easing默认有两个效果："linea

hubowei / 0评论 2016-06-17

jQuery中使用animate自定义动画的方法

有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。},3000)显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。单位e

86463967 / 0评论 2016-05-29

jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。}以上所述是小编给大家介绍的jQuery animate和CSS3相结合实现缓动追逐效果，希望对大家有所帮助！

86540295 / 0评论 2016-04-18

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。然后，最后还是自己动手写了，虽然花了点时间，也碰到了一些问题，不过还是不错的，问题也最后解决了，至少对几个jQuery的内置函数又熟悉了一点。

madanling / 0评论 2016-01-10

基于jquery animate操作css样式属性小结

昨天突然有网友问我animate()方法可以来操作所有css属性吗？是的，我告诉他可以的。不过，在此有需要注意点需要大家搞清楚：当使用 animate()时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 pa

scssqly轩 / 0评论 2019-04-23

jQuery使用animate创建动画用法实例

本文实例讲述了jQuery使用animate创建动画用法。分享给大家供大家参考。animate用于创建自定义动画的函数。</html>希望本文所述对大家的jquery程序设计有所帮助。

80991930 / 0评论 2015-08-07

jQuery中animate动画第二次点击事件没反应

$.stop().animate;第二次点击事件动画没反应的原因：top是page元素顶部相与其父元素顶部的距离，第一次点击后，page元素顶部已经移动到距其父元素顶部-300px的位置，第二次点击时的并不是page在移动后的位置继续t移动-300px，而

舜岳 / 0评论 2019-04-21

jQuery的animate函数实现图文切换动画效果

在一些图片网站上我们可以看到在展示图片的时候，用鼠标轻轻滑上图片可以看到该图片的文字介绍信息，其实用jQuery的animate函数就可以实现这样一个动画过程。<p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍

YUYISHARE / 0评论 2019-04-21

jquery使用animate方法实现控制元素移动

本文实例讲述了jquery使用animate方法实现控制元素移动。分享给大家供大家参考。<p>By default, all HTML elements have a static position,and cannot be moved. T

81971235 / 0评论 2015-03-27

jQuery中animate用法实例分析

本文实例讲述了jQuery中animate用法。分享给大家供大家参考。这是一个简单的animate函数尝试。</script>希望本文所述对大家的jQuery程序设计有所帮助。

warhin / 0评论 2015-03-09

jquery中animate的stop()方法作用实例分析

本文实例分析了jquery中animate的stop()方法作用。分享给大家供大家参考。</script>希望本文所述对大家的jQuery程序设计有所帮助。

warhin / 0评论 2019-04-20

jQuery的animate函数学习记录

很久之前就对jQuery animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：。按照常规思路，动画

84533871 / 0评论 2019-04-18

JQuery动画animate的stop方法使用详解

<input type="button" id="btn3" value="停止所有动画，到达终点">. $.stop(); // 停止当前动画,沿路返回起点，若是返回过程中再点击，会

前端档案 / 0评论 2014-05-09

jQuery动画效果animate和scrollTop结合使用实例

CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画。字符串值无法创建动画。$.click;上面的代码表示滚动条跳到0的位置，页面移动速度是800。结合scrollTop实用示例：代码如下：。});表示点击相关ID移动到指定位置：点击ID

nnj / 0评论 2014-04-02

jquery中animate动画积累的解决方法

<span style="white-space:pre"> </span>/* 无缝式焦点图 */. 我瞅了下，挺简单的，乍一看，没啥问题啊。由于以前也没遇到过此问题，我也是想了半个多小时，没搞定，后来翻了翻以

keyijing / 0评论 2013-10-05

jQuery Animation实现CSS3动画示例介绍

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。详细用法请参考jQuery 效果 - animate()方法和官方教程。像CSS3好多效果因为不是数值的，所以是

scssqly轩 / 0评论 2013-08-14

jquery animate实现鼠标放上去显示离开隐藏效果

+ "<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>". + "<div style=

84261948 / 0评论 2013-07-21

jQuery动画animate方法使用介绍

<button id="left">向右移动</button> <button id="right">向左移动</button>. <p> 返回值:jQue

84533871 / 0评论 2013-05-06

JQuery 自定义CircleAnimation，Animate方法学习笔记

在此贴出一些学习成果，希望能对学习JQuery的其他同学有所帮助，同时也记录下自己的学习情况。看了一些JQuery的官方教程，已经有点心潮澎湃了，就决定自己尝试着写一些东西出来。我看到了很多很绚的动画效果，然后决定自己也尝试一下，我决定要写一个圆周运动的动

87407607 / 0评论 2011-07-09

jquery animate图片模向滑动示例代码

如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默认的动画形式。　　函数声明如下： 代码如下：。　　下

88487901 / 0评论 2011-01-26

解决jquery的.animate()函数在IE6下的问题

在项目里面实现左的菜单折叠显示的效果，这个在软件界面里是常见的（本来到网上copy一段代码也就了事了，估计写的比我都好，但学习嘛，就要有学习的精神^^!）, 我是用.animate()去实现隐藏展开的，代码如下： 代码如下：。可是IE6下无法隐藏left，

YUYISHARE / 0评论 2010-12-03

用js实现的模拟jquery的animate自定义动画(2.5K)

后来发现还不错。这个版本基本上跟jquery的animate一样了。（效率还没测试过。）； 如果有专业测试人员 帮我测试下。C:动画执行用时，以毫秒为单位；[可选 默认500毫秒]; D:回调函数;[可选] 3:方法说明 1:animate()方法 jel

87407607 / 0评论 2010-07-19

如何在WordPress中嵌入Edge Animate作品

本文只介绍如何将其集成到Wordpress中。Edge Suite是Wordpress插件，可以帮助你把以.oam格式发布的Edge Animate作品插入到Wordpress博客文章中。通过“Edge Suite”，你可以上传Edge Animate动画

曾立文 / 0评论 2013-03-04

jquery animate 动画效果使用说明

animate 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。在 jQuery 1.2 中，你可以使用 em 和 % 单位。jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。点击

88487901 / 0评论 2009-11-04