jQuery好看的带进度指示器《返回顶部》
jQuery返回顶部,带有进度指示器,如图所示,html+css+jq,很简易,感觉特别实用,下面分享给大家吧
html:
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
</svg>
</div>
css:
/* #Progress
================================================== */
.progress-wrap {
position: fixed;
right: 50px;
bottom: 50px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap::after {
position: absolute;
font-family: 'unicons';
content: '↑';
text-align: center;
line-height: 46px;
font-size: 24px;
color: var(--grey);
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover::after {
opacity: 0;
}
.progress-wrap::before {
position: absolute;
font-family: 'unicons';
content: '↑';
text-align: center;
line-height: 46px;
font-size: 24px;
opacity: 0;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover::before {
opacity: 1;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: var(--grey);
stroke-width: 4;
box-sizing:border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
jq:
/* Please ❤ this if you like it! */
(function($) { "use strict";
//Switch dark/light
$(".switch").on('click', function () {
if ($("body").hasClass("light")) {
$("body").removeClass("light");
$(".switch").removeClass("switched");
}
else {
$("body").addClass("light");
$(".switch").addClass("switched");
}
});
$(document).ready(function(){"use strict";
//Scroll back to top
var progressPath = document.querySelector('.progress-wrap path');
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function () {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
$(window).scroll(updateProgress);
var offset = 50;
var duration = 550;
jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.progress-wrap').addClass('active-progress');
} else {
jQuery('.progress-wrap').removeClass('active-progress');
}
});
jQuery('.progress-wrap').on('click', function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
})(jQuery);
样式里面的var(--grey),记得替换为自己选择的颜色,关于返回顶部的大小,都可以在css里面调整,快试试吧
文章由官网发布,如若转载,请注明出处:https://www.dpaoz.com/1192
1 条评论
472
发表评论

热门文章
自媒体博客Spimes主题11w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
Spzac个人资讯下载类主题6.6w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
Splity博客双栏主题4.8w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
vCard主题个人简历主题4.3w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
热评文章
自媒体博客Spimes主题266 评论
Splity博客双栏主题170 评论
Spzac个人资讯下载类主题82 评论
Spzhi知识付费社区主题34 评论
Splinx博客图片主题33 评论
vCard主题个人简历主题27 评论
Pure轻简主题22 评论
Spkan视频影视类模板21 评论
沐风
3天前
最近有更新么~