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

具体代码如下所示：

!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 平滑滚动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！