这篇文章主要介绍了使用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. delphi 快捷键

    1. 编辑器     按键时候请注意输入法: 英文状态 Code Folding (Fold ---Methods)   [Ctrl + Shift] + K + M      

  2. Selenium webdriver 操作日历控件

    一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如: 但是,有的日期控件是readonly的 比如1 ...

  3. java视频转码博客

    一下为找到的资料地址 http://lichen.blog.51cto.com/697816/162124 http://www.cnblogs.com/live365wang/archive/201 ...

  4. 如何让ListView的item不可点击

    原文链接:http://blog.csdn.net/zhangfei_jiayou/article/details/6972752 1. 如果是listView的id是使用系统默认的id,如下, 则可 ...

  5. addsubview跟insertsubview的区别

    子视图是以栈的方式存放的. 每次addsubview时都是在最后面添加. 每次在addsubview前和addsubview后可以看看[self.view.subViews count]: 你看看你的 ...

  6. IOS - 首次启动程序出现的画面介绍

    1.在appdelegate.m中找到 “application:didFinishLaunchingWithOptions:” 通过NSUserDefaults 来进行判断 if (![[NSUse ...

  7. MongoDB 3.0（1）：CentOS7 安装MongoDB 3.0服务

    目录(?)[-] 1下载安装 2MongoDB CRUD 1创建数据 2更新数据 3删除 4查询 5更多方法 3MongoDB可视化工具 4总结   本文原文连接: http://blog.csdn. ...

  8. in addition to 和 except for

    except for 除了...以外(与 except for 连用的整体词与 except for 所跟的词往往不是同类的,是指整体中除去 一个细节.) eg:Your composition is ...

  9. 检查C++内存泄露

    #ifdef _DEBUG #define DEBUG_CLIENTBLOCK new( _CLIENT_BLOCK, __FILE__, __LINE__) #else #define DEBUG_ ...

  10. 瓦片地图与geoserver发布

    本文主要包括以下内容 TileMill生成Tile影像金字塔(.mbtiles压缩文件) Mbutil(https://github.com/mapbox/mbutil)解压缩 Apache HTTP ...