gototop.js jquery返回顶部的js插件-BFW插件库

gototop.js jquery返回顶部的js插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["gototop"], function() {
                $('#js-go_top').gotoTop({
                    offset: 500, //距离顶部的位置
                    speed: 300, //移动到顶部的速度
                    /*     iconSpeed : 300, //icon动画样式的速度*/
                    animationShow: {
                        'transform': 'translate(0,0)',
                        'transition': 'transform .5s ease-in-out'
                    }, //icon动画样式显示时
                    animationHide: {
                        'transform': 'translate(80px,0)',
                        'transition': 'transform .5s ease-in-out'
                    } //icon动画样式隐藏时
                });

            });
        });
    </script>
    <style type="text/css">
        .goTop >img {
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .goTop {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <p>
        jquery返回顶部的插件
    </p>
    <p>
        向下滚动网页查看右下角
    </p>
    <p style="height: 600px ">
        向下滚动网页1
    </p>
    <p style="height: 600px ">
        向下滚动网页2
    </p>
    <p style="height: 600px ">
        向下滚动网页3
    </p>
    <p style="height: 600px ">
        向下滚动网页4
    </p>
    <p style="height: 600px ">
        向下滚动网页5
    </p>
    <div class="goTop" id="js-go_top">
        <img src="http://repo.bfw.wiki/bfwrepo/image/icon_top.png" alt="回到顶部图片">
    </div>
</body>
</html>

gototop.js jquery返回顶部的js插件

网友评论0

xRoll.js

gototop.js

bfwscroll.js

parallax.js

pushIn.js

wow.js

jquery.tiltedpage-scroll.js

ScrollMagic.min.js

jquery.mousewheel.js

perfect-scrollbar.js