使用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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Java File类的常用方法总结
Mar 18 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
JS实现520 表白简单代码
May 21 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 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 用数组降低程序的时间复杂度
2009/12/04 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
Python异常处理知识点总结
2019/02/18 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
教师演讲稿范文
2014/01/08 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
单位提档介绍信
2015/10/22 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android