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 相关文章推荐
js实现在字符串中提取数字
Nov 05 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
Vue实现附件上传功能
May 28 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
JavaScript实现轮播图效果
Oct 30 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
如何删除多级目录
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
用jquery来定位
2007/02/20 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python numpy数组转置与轴变换
2019/11/15 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
终止劳动合同协议书
2014/04/14 职场文书
交通工程专业推荐信
2014/09/06 职场文书
售房协议书范本2014
2014/10/23 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python