使用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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
AngularJS入门之动画
Jul 27 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
ES6 Set结构的应用实例分析
Jun 26 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
php中截取字符串支持utf-8
2007/01/18 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
python爬取各类文档方法归类汇总
2018/03/22 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python中altair可视化库实例用法
2021/01/26 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
extern是什么意思
2016/03/10 面试题
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2019 入党申请书范文
2019/07/10 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android