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


Posted in Javascript onMay 27, 2014

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用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>
Javascript 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
JQuery获取表格数据示例代码
May 26 #Javascript
chrome下img加载对height()的影响示例探讨
May 26 #Javascript
chrome下jq width()方法取值为0的解决方法
May 26 #Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 #Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 #Javascript
jquery attr方法获取input的checked属性问题
May 26 #Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
js中this的用法实例分析
2015/01/10 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python序列类型种类详解
2020/02/26 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
涉密人员保密承诺书
2014/05/28 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
如何写好闭幕词
2019/04/02 职场文书