使用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 四则运算精度修正函数代码
May 31 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
DOM 高级编程
May 06 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
浅谈JS的原型和继承
May 08 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JS中的phototype详解
2017/02/04 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python3序列化与反序列化用法实例
2015/05/26 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
函数指针的定义是什么
2016/08/14 面试题
初三家长会邀请函
2014/01/18 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
医药销售自荐书
2014/05/29 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python