使用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 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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 和 COM
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue 开发之路由配置方法详解
2019/12/02 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
详解Python中的Descriptor描述符类
2016/06/14 Python
python实现机器学习之元线性回归
2018/09/06 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
经理助理岗位职责
2015/02/02 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
电影圆明园观后感
2015/06/03 职场文书
庆祝教师节主持词
2015/07/06 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
SQL 聚合、分组和排序
2021/11/11 MySQL
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android