JS特效第40弹：jQuery返回顶部插件弹性动画

马coder

于 2023-12-22 18:00:00 发布

阅读量672

点赞数 13

文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/weixin_38343072/article/details/134939356

版权

jquery实现的带反弹动画效果返回顶部插件，jquery网页右下角返回顶部按钮，设计美观大气，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery返回顶部插件弹性动画</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="css/scrollTop_iconStyle.css">
    <link rel="stylesheet" href="css/scrollTop_bgStyle.css">
</head>

<body>

    <!--    Start Sections    -->
    <section class="scrollTop_section"><h1>Section 1</h1></section>
    <section class="scrollTop_section"><h1>Section 2</h1></section>
    <section class="scrollTop_section"><h1>Section 3</h1></section>
    <section class="scrollTop_section"><h1>Section 4</h1></section>
    <section class="scrollTop_section"><h1>Section 5</h1></section>
    <section class="scrollTop_section"><h1>Section 6</h1></section>
    <!--    End Sections    -->
    <!--    Start Div Scroll    -->
    <div class="scrollTop_top">
        <i class="fa fa-angle-double-up fa-4x"></i>
    </div>
    <!--    End Div Scroll    -->

    <script src="js/jquery-1.12.1.min.js"></script>
    <script src="js/scrollTop_script.js"></script>
</body>

</html>

全部代码：jQuery返回顶部插件弹性动画.zip