Jquery回到顶部插件【query.scrollUp.js】使用 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="generator" content="58IMG.COM" />
    <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- 回到顶部 jquery插件 -->
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>
    <style type="text/css">
        .content { height: 1500px; }
        #scrollUp { background-image: url("top.png"); bottom: 20px; right: 20px; width: 38px; height: 38px; }
    </style>
</head>
<body>
    <div class="content"></div>
    <script type="text/javascript">
        $(function () {
            //scrollup
            $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '300', // Distance from top before showing element (px)
                topSpeed: 300, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: '', // Text for element
                activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
        });
    </script>
</body>
</html>

除以上代码还需引入一张点击的图标图片，

 

最新学习canvas,可以利用canvas绘制向上箭头的图标，代替 箭头图片：【推荐】

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="generator" content="58IMG.COM" />
    <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- 回到顶部 jquery插件 -->
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>
    <style type="text/css">
        .content { height: 1500px; }
        #scrollUp { background-color:#454545; border-radius:30px; bottom: 20px; right: 20px; width: 38px; height: 38px; }
    </style>
</head>
<body>
    <div class="content">
        
    </div>
    <script type="text/javascript">
        $(function () {
            

            //scrollup background-image: url("top.png");
            $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '300', // Distance from top before showing element (px)
                topSpeed: 300, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: '<canvas id="cvs" width="38px;" height="38px;" ></canvas>', // Text for element
                activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });

            var canvas = document.getElementById('cvs');
            cxt=canvas.getContext('2d');
            cxt.beginPath();
            cxt.lineCap = 'round';//圆线头
            cxt.moveTo(13, 22);
            cxt.lineTo(19,14);
            cxt.lineTo(25,22);
            cxt.strokeStyle = "#FBFBFB";
            cxt.lineWidth = 3;
            cxt.stroke();
        });
    </script>
</body>
</html>

 

posted @ 2017-05-05 19:22  RyanxChen  阅读(479)  评论(0)    收藏  举报