使用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获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
node.js基础知识汇总
Aug 25 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP注释实例技巧
2008/10/03 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
浅析NumPy 切片和索引
2020/09/02 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
技校生自我鉴定
2013/12/08 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Python if else条件语句形式详解
2022/03/24 Python