根据页面高度在顶部写动态滚动条

效果：

html

  <div style="height: 3000px;">

    </div>

    <div class="progressbar" id="progressbar"></div>

 

 

css

    <style>

        .progressbar {

            position: fixed;

            top: 0;

            left: 0;

            right: auto;

            height: 6px;

            width: 100%;

            z-index: 9999;

        }

        .ui-progressbar-value {

            position: absolute;

            width: 0;

            height: 100%;

            left: 0;

            top: 0;

        }

        .ui-progressbar-value {

            transition-duration: 0.5s;

            transition-property: width;

            transition-timing-function: cubic-bezier(.35, 1, .45, 1);

            background: linear-gradient(to left, rgb(232 50 47) 0%, rgb(211 40 62) 10%, #cd2643 90%, #ba194e 100%);

        }

    </style>

 

js

   $("#progressbar").progressbar({

            value: 0

        });

        // 监听滚动事件

        $(window).scroll(function () {

            var scrollTop = $(this).scrollTop();

            var scrollHeight = $(document).height();

            var windowHeight = $(this).height();

            var progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

            $('#progressbar').progressbar("value", progress);

        });

 js引入文件  文件网上找一下

    <script src="static/js/jquery-3.3.1.min.js"></script>

    <script src="static/js/jquery-ui.js"></script>

 

 

    <div class="progressbar" id="progressbar"></div>