AmazeUI 平滑滚动效果的示例代码


Posted in HTML / CSS onAugust 20, 2020

具体代码如下所示:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>平滑滚动</title>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin:300px;">
<!-- $('html, body').animate({scrollTop: 0}, '500'); //兼容旧版IE的写法 -->
<div style="height: 2000px;"></div>
<!-- 滚动到顶部 -->
<button data-am-smooth-scroll class="am-btn am-btn-success">滚动到顶部</button>
<!-- 滚动到底部 -->
<button id="doc-scroll-to-btm" class="am-btn am-btn-primary">滚动到底部</button>
<script>
  $('#doc-scroll-to-btm').on('click', function() {
    var $w = $(window);
    $w.smoothScroll({position: $(document).height() - $w.height()});
  });
</script>
<!-- 定义选项 -->
<button data-am-smooth-scroll="{position: 57, speed: 5000}" class="am-btn am-btn-danger">慢悠悠地滚到距离顶部 57px 的位置</button>
<!--通过 Data API-->
<!-- 在元素上添加 data-am-smooth-scroll 属性。 -->
<button data-am-smooth-scroll class="am-btn am-btn-success">滚动到顶部</button>
<!-- 如果要指定滚动的位置,可以给这个属性设一个值。 -->
<button data-am-smooth-scroll="{position: 189}" class="am-btn am-btn-secondary">指定滚动的位置</button>
<!--
通过 Javascript
$(window).smoothScroll([options]);
// 滚动到底部
$('#my-button').on('click', function() {
  var $w = $(window);
  $w.smoothScroll({position: $(document).height() - $w.height()});
});
-->
<div style="height: 2000px;"></div>
</body>
</html>

效果图:

AmazeUI 平滑滚动效果的示例代码
 

到此这篇关于AmazeUI 平滑滚动效果的示例代码的文章就介绍到这了,更多相关AmazeUI 平滑滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 #HTML / CSS
amaze ui 的使用详细教程
Aug 19 #HTML / CSS
AmazeUI中模态框的实现
Aug 19 #HTML / CSS
Ratchet 模态框的实现
Aug 19 #HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 #HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 #HTML / CSS
You might like
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php实现微信模板消息推送
2018/03/30 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
js实现中文实时时钟
2020/01/15 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
Python+django实现文件上传
2016/01/17 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
Python骚操作之动态定义函数
2019/03/26 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python处理写入数据代码讲解
2020/10/22 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
企业宣传方案
2014/03/04 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL