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学习笔记 delete运算符
Sep 13 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
canvas绘制环形进度条
Feb 23 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python提取页面内url列表的方法
2015/05/25 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
简单谈谈python基本数据类型
2018/09/26 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python tkinter窗口最大化的实现
2019/07/15 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
幼儿园教师国培感言
2014/02/02 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
详解Python描述符的工作原理
2021/06/11 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Python 数据可视化之Seaborn详解
2021/11/02 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python