使用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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
vue里面父组件修改子组件样式的方法
Feb 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 XML操作类DOMDocument
2009/12/16 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python sorted对list和dict排序
2020/06/09 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
大二学期个人自我评价
2014/01/13 职场文书
学校介绍信范文
2014/01/14 职场文书
青春演讲稿范文
2014/05/08 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
建议书的格式及范文
2015/09/14 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python