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 相关文章推荐
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
VFP与其他应用程序的集成
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
Javascript 函数对象的多重身份
2009/06/28 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
js实现网页随机验证码
2020/10/19 Javascript
CentOS中升级Python版本的方法详解
2017/07/10 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
职称自我鉴定
2013/10/15 职场文书
精细化工应届生求职信
2013/11/17 职场文书
安全事故检讨书
2014/01/18 职场文书
高三励志标语
2014/06/05 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Python time库的时间时钟处理
2021/05/02 Python
PHP 时间处理类Carbon
2022/05/20 PHP
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL