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

残影游戏 · 发表于 2024-4-20 10:33:08

具体代码如下所示：

<!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>
<script src="assets/js/jquery.min.js"></script>
<!--[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;">
<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>
<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 平滑滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

巭孬嫑耍兲拳 · 发表于 2024-4-21 13:34:44

感谢分享，受益匪浅！

咕叽大叔 · 发表于 2024-4-25 20:39:46

保持尊重和礼貌对待其他成员是必要的。

快乐的彩虹888 · 发表于 2024-4-27 19:30:59

我不确定这个信息的准确性，请再确认一下

浮生若梦 · 发表于 2024-4-28 17:27:18

太棒了！感谢分享这个信息！

周大汤 · 发表于 2024-5-4 01:59:05

好用好用

倚栏吹牛 · 发表于 2024-5-4 19:51:51

能给个链接吗？我想深入了解一下。

起舞闻鸡酒未醒 · 发表于 2024-5-7 19:08:41

感谢分享，受益匪浅！

真的会气鼠 · 发表于 2024-7-4 17:04:01

每日一回

陆景华飞翔 · 发表于 2024-7-12 07:20:32

我想了解更多

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源