未读代码 未读代码
首页
  • Java 18 新功能介绍
  • Java 17 新功能介绍
  • Java 16 新功能介绍
  • Java 15 新功能介绍
  • Java 14 新功能介绍
  • Java 8 新特性

    • Java 8 Lambda 表达式
    • Java 8 Stream 流式操作
    • Java 8 时间处理介绍
    • Java 8 Optional 介绍
Java 源码分析
  • 限流算法
  • 抓取必应壁纸
  • Java 开发工具

    • IDEA 使用教程
    • Guava 使用教程
  • Arthas 问题定位
  • JMH 基准测试
Spring Boot 系列
GitHub (opens new window)
首页
  • Java 18 新功能介绍
  • Java 17 新功能介绍
  • Java 16 新功能介绍
  • Java 15 新功能介绍
  • Java 14 新功能介绍
  • Java 8 新特性

    • Java 8 Lambda 表达式
    • Java 8 Stream 流式操作
    • Java 8 时间处理介绍
    • Java 8 Optional 介绍
Java 源码分析
  • 限流算法
  • 抓取必应壁纸
  • Java 开发工具

    • IDEA 使用教程
    • Guava 使用教程
  • Arthas 问题定位
  • JMH 基准测试
Spring Boot 系列
GitHub (opens new window)
  • HTML:CSS:JS

    • CSS - 使用CSS实现Mac窗口效果
    • Jquery - 使用jquery-easing.js实现页面锚点平滑滚动
    • HTML:CSS:JS
    • HTML:CSS:JS
    程序猿阿朗
    2018-08-19

    Jquery - 使用jquery-easing.js实现页面锚点平滑滚动

    # 使用jquery-easing.js实现页面锚点平滑滚动

    使用jquery easing.js (opens new window)可以实现多动动画效果。 jquery easing.js中定义了很多种不同的动画效果,动画速度和时间的关系图可以参考此图:

    使用easeInOutExpo效果示例锚点的平滑滚动效果,直接上代码。

    # 效果图

    平滑滚动

    # HTML代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="utf-8">
        <title>平滑滚动</title>
    </head>
    <body>
    	<p id="p1">1</p>
    	<p>2</p>
    	<p>3</p>
    	<p>4</p>
    	<p>5</p>
    	<p>6</p>
    	<p>7</p>
    	<p>8</p>
    	<p>9</p>
    	<p>10</p>
    	<p>11</p>
    	<p>12</p>
    	<p>13</p>
    	<p>14</p>
    	<p>15</p>
    	<p>16</p>
    	<p>17</p>
    	<p>18</p>
    	<p>19</p>
    	<p>20</p>
    	<p>21</p>
    	<p>22</p>
    	<p>23</p>
    	<p>24</p>
    	<p>25</p>
    	<p>26</p>
    	<p>27</p>
    	<p>28</p>
    	<p>29</p>
    	<p>30</p>
    	<p>31</p>
    	<a href="#p1">TO P1</a>
    
        <script src="js/jquery.min.js"></script>
    	<script src="js/Anchor-animation.js"></script>
    	<script src="js/jquery-easing.js"></script>
    </body>
    </html>
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

    # Anchor-animation.js代码

    (function($) {
        // Smooth scrolling using jQuery easing
        $('a[href*="#"]:not([href="#"])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000, "easeInOutExpo");
                    return false;
                }
            }
        });
    })(jQuery); // End of use strict
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    # jquery-easing.js代码

    此处因为只使用到了easeInOutExpo方法,所以我删除了其他没有用到的方法,只保留了easeInOutExpo方法。

    jQuery.easing['jswing'] = jQuery.easing['swing'];
    
    jQuery.extend( jQuery.easing,
    {
    	def: 'easeOutQuad',
    	swing: function (x, t, b, c, d) {
    		//alert(jQuery.easing.default);
    		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    	},
    	
    	easeInOutExpo: function (x, t, b, c, d) {
    		if (t==0) return b;
    		if (t==d) return b+c;
    		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    	}
    });
    
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    订阅

    文章持续更新,订阅可以关注「 程序猿阿朗 」公众号或者未读代码博客。

    文章作者: 程序猿阿朗
    文章链接:https://www.wdbyte.com/2018/08/html-css/jquery-easing-anchor-animation/
    版权声明:本网站当前文章采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 未读代码!
    #Css#Javascript#平滑滚动
    上次更新: 2022/06/01, 01:01:31
    CSS - 使用CSS实现Mac窗口效果

    ← CSS - 使用CSS实现Mac窗口效果

    最近更新
    01
    Java 8 Lambda 和 Comparator 排序
    04-06
    02
    Java 18 新功能介绍
    03-31
    03
    5种限流算法,7种限流方式,挡住突发流量?
    03-15
    更多文章>

    提示:评论前请刷新页面,否则评论的可能不是当前文章。

    Theme by Vdoing | Copyright © 2018-2022 程序猿阿朗 | MIT License | 皖ICP备20000567号-1
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式