jQuery创建平滑的页面滚动(顶部或底部)


Posted in Javascript onFebruary 26, 2013

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery。让您可以滚动到你的网页的顶部或底部

它是如何工作的
首先,加载jquery库在</ head>标签结束前:

<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部:

链接:
<a href="#" class="scrollToBottom">Scroll to bottom</a>jQuery
<script type="text/javascript"> 
$(document).ready(function(){ 
// Scroll page to the bottom 
$('a.scrollToBottom').click(function(){ 
$('html, body, .content').animate({scrollTop: $(document).height()}, 300); 
return false; 
}); 
}) 
</script>

它是如何工作的
第一行代码在页面加载之前执行
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在这个函数中,执行这个代码
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。
jQuery的滚动到顶部
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。
链接:
<a href="#" class="scrollToTop">Scroll to bottom</a>jQuery

<script type="text/javascript"> 
$(document).ready(function(){ 
$('a.scrollToTop').click(function(){ 
$('html, body').animate({scrollTop:0}, 'slow'); 
return false; 
}); 
}) 
</script>

它是如何工作的
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行:
<code>return false;</code>这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样
event.preventDefault();
Javascript 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 #Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 #Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 #Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php利用事务处理转账问题
2015/04/22 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
dojo 之基础篇
2007/03/24 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
Python rstrip()方法实例详解
2018/11/11 Python
python文件选择对话框的操作方法
2019/06/27 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
深入浅析Python代码规范性检测
2020/07/31 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python 从list中随机取值的方法
2020/11/16 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
质检的岗位职责
2013/11/17 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
环保建议书400字
2014/05/14 职场文书
小学教师个人总结
2015/02/05 职场文书
商场收银员岗位职责
2015/04/07 职场文书
仰望星空观后感
2015/06/10 职场文书
学雷锋感言
2015/08/03 职场文书