Canvas实现进度环返回顶部按钮

PetitQ Other/其他 2019-3-20 1.65K 0 0

返回顶部对于博主并不陌生，我们在浏览网页的时候，可以看到网页一般右侧底部都会有一个“返回顶部”的按钮，点击返回按钮网页就返回到顶部。具体我们来点炫酷新颖的“Canvas 实现进度环返回顶部按钮”功能，也就是当页面下滑动的时候会在页面的右下角出现这个 Canvas 绘制进度环按钮，点击即可实现返回页面顶部功能。具体效果当页面向下滑动 15%的时候回在页面的右下角出现这个按钮，并且具有 Canvas 绘制进度环的效果。大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用 data 储存并使用 css 的 content 属性实现。

1、js 代码

```
    var bigfa_scroll = {
```

        drawCircle: function(id, percentage, color) {

            var width = jQuery(id).width();

            var height = jQuery(id).height();

            var radius = parseInt(width / 2.20);

```
            var position = width;
```

            var positionBy2 = position / 2;

```
            var bg = jQuery(id)[0];
```
```
            id = id.split("#");
```

            var ctx = bg.getContext("2d");

```
            var imd = null;
```
```
            var circ = Math.PI * 2;
```
```
            var quart = Math.PI / 2;
```

            ctx.clearRect(0, 0, width, height);

```
            ctx.beginPath();
```
```
            ctx.strokeStyle = color;
```
```
            ctx.lineCap = "square";
```
```
            ctx.closePath();
```
```
            ctx.fill();
```
```
            ctx.lineWidth = 3;
```

            imd = ctx.getImageData(0, 0, position, position);

            var draw = function(current, ctxPass) {

                ctxPass.putImageData(imd, 0, 0);

```
                ctxPass.beginPath();
```

                ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);

```
                ctxPass.stroke();
```
```
            }
```

            draw(percentage / 100, ctx);

```
        },
```
```
        backToTop: function($this) {
```
```
            $this.click(function() {
```

                jQuery("body,HTML").animate({

```
                    scrollTop: 0
```
```
                },
```
```
                800);
```
```
                return false;
```
```
            });
```
```
        },
```

        scrollHook: function($this, color) {

            color = color ? color: "#000000";

```
            $this.scroll(function() {
```

                var docHeight = (jQuery(document).height() - jQuery(window).height()),

```
                $windowObj = $this,
```
```
                $per = jQuery(".per"),
```
```
                percentage = 0;
```

                defaultScroll = $windowObj.scrollTop();

                percentage = parseInt((defaultScroll / docHeight) * 100);

                var backToTop = jQuery("#backtoTop");

                if (backToTop.length > 0) {

                    if ($windowObj.scrollTop() > 200) {

                        backToTop.addClass("button--show");

```
                    } else {
```

                        backToTop.removeClass("button--show");

```
                    }
```

                    $per.attr("data-percent", percentage);

                    bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);

```
                }
```
```
            });
```
```
        }
```
```
    }
```
```
    jQuery(document).ready(function() {
```

        jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');

```
        var T = bigfa_scroll;
```

        T.backToTop(jQuery("#backtoTop"));

        T.scrollHook(jQuery(window), "#d57a21");

```
    });
```

也想出现在这里？联系我们吧

2、调用 js

在 header.php 中的添加以下代码：

<script src="<?php echo get_template_directory_uri(); ?>/js/jindu.js"></script>

3、css 样式

```
#backtoTop {  
```
```
    background-color:#eee;  
```
```
    border-radius:100%;  
```
```
    bottombottom:10%;  
```
```
    height:48px;  
```
```
    position:fixed;  
```
```
    rightright:-100px;  
```
```
    width:48px;  
```
```
    transition:0.5s;  
```
```
    -webkit-transition:0.5s  
```
```
}  
```
```
#backtoTop.button--show{  
```
```
    rightright:10px  
```
```
}  
```
```
.per{  
```
```
    font-size:16px;  
```
```
    height:48px;  
```
```
    line-height:48px;  
```
```
    position:absolute;  
```
```
    text-align:center;  
```
```
    top:0;  
```
```
    width:48px;  
```
```
    color:#555;  
```
```
    cursor:pointer  
```
```
}  
```

.per:before{content:attr(data-percent)}

.per:hover:before{content:"▲";font-size: 22px;line-height: 0;}

当然如果您想修改返回顶部进度环的颜色，T.scrollHook(jQuery(window), "#d57a21 里的颜色参数即可，可以在颜色查询对照表中选择。

Canvas 实现进度环返回顶部按钮

已有 412 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Other/其他

Canvas实现进度环返回顶部按钮

1、js 代码

2、调用 js

3、css 样式

Canvas 实现进度环返回顶部按钮

相关文章

Discuz 论坛社区图文整站安装说明

HTML/JS相互转换工具

百度网盘下载神器PanDownload推出网页版

发表回复取消回复

热销模板

Other/其他

1、js 代码

2、调用 js

3、css 样式

Canvas 实现进度环返回顶部按钮

相关文章

发表回复 取消回复

热销模板

发表回复取消回复