• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 平滑滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:AmazeUI在模态框中嵌入表单形成模态输入框
    下一篇:AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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