<div class="scroll">
  <strong><em class="pc">0</em><em class="mo">0</em>%</strong>
  <ul>li></li><li></li><li></li></ul>
</div>



$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop(); // 当前滚动距离
    var docHeight = $(document).height() - $(window).height(); // 页面可滚动总高度
    var percent = (scrollTop / docHeight) * 100; // 计算百分比

    // 限制百分比范围在 0~100 之间
    percent = Math.min(100, Math.max(0, percent));

    // 更新显示（四舍五入）
    $('.scroll em.pc').text(Math.round(percent));
    $('.scroll em.mo').text(Math.round(percent));
});




.scroll {
    position: fixed;
    bottom: 80px;
    width: 100px;
    text-align: center;
    z-index: 99;
    font-family: 'Montserrat', sans-serif;
    left: 50%;
    margin-left: -50px;
}

.scroll strong {
    font-size: 18px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    display: block;
    margin-bottom: 19px;
}

.scroll strong em {
    color: inherit
}

.scroll ul {
    display: inline-block
}

.scroll ul li {
    display: block;
    width: 19px;
    height: 5px;
    margin-bottom: 4px;
    background: #6ebe4b;
    animation: 1.5s linear char infinite;
    opacity: 0
}

.scroll ul li:nth-child(2) {
    animation-delay: 0.3s
}

.scroll ul li:nth-child(3) {
    animation-delay: 0.6s
}

.scroll .mo {
    display: none
}

.scroll .pc {
    display: inline-block
}