使用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面向对象包装类Class封装类库剖析
Jan 24 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
vue构建单页面应用实战
Apr 10 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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实现下载文件的两种方法
2013/07/05 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
js实现一键复制功能
2017/03/16 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue实现评论列表功能
2019/10/25 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python是什么 Python的用处
2020/05/26 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
财务会计专业应届毕业生求职信
2013/10/18 职场文书
语文教学感言
2014/02/06 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
2014中考励志标语
2014/06/05 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript