具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮,并且具有Canvas绘制进度环的效果。大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用data储存并使用css的 content属性实现。Canvas进度环返回按钮实现方法:确保引入了jquery,下面的代码加入到你的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), "#cc0000");
});
参考css代码:#backtoTop{background-color:#eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
#backtoTop.button--show{right: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:20px} 修改进度环颜色,则修改T.scrollHook(jQuery(window,'#000000'));的颜色参数即可,默认黑色。
评论
19条评论高山流水 Lv.1
Chrome 86.0.4240.198
Windows 回复
新人报道
学习一下
山东省济南市 移动
智云 Lv.1
Chrome 86.0.4240.198
Windows 回复
感谢楼主
,好人一生平安
广东省韶关市 移动
上海伟泰管道 Lv.1
Chrome 108.0.0.0
Windows 回复
好看视频通用代码
中国 移动
梵行. Lv.1
Chrome 107.0.0.0
Windows 回复
对方过后就发的规划十多个符合对方过后是对方过后是对方过后申达股份好
辽宁省沈阳市 联通
houlijun Lv.1
Chrome 86.0.4240.198
Windows 回复
新人学习,感谢分享
上海市嘉定区 电信
lucky* Lv.1
Maxthon 5.3.8.2000
Windows 回复
新人报道
学习一下
广东省广州市 电信
dajiahao Lv.1
Firefox 91.0
Windows 回复
不错哦
河北省沧州市 联通
夜风 Lv.1
Firefox 101.0
Windows 7 x64 Edition 回复
看看
上海市 电信
夏未央 Lv.1
Chrome 86.0.4240.198
Windows 回复
快快快
广东省东莞市 电信