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 写类方式之七
Jul 05 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
react-native android状态栏的实现
Jun 15 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
用js编写留言板
Mar 17 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
?生?D片??C字串
2006/12/06 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
金士达面试非笔试
2012/03/14 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
公司总经理岗位职责
2015/04/01 职场文书
个人求职意向书
2015/05/11 职场文书
董事长开业致辞
2015/07/29 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS