jQuery好看的带进度指示器《返回顶部》

寻梦xunm| 566| 收集

2年前

超过979天温馨提示

本文最后更新于2022年03月18日，已超过979天没有更新，若内容或图片失效，请留言反馈。

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

css 教程 html 代码返回顶部 jquery

0 赞 or 打赏

喜欢就打赏一点