Progress bar for scrolling using JQuery


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
    $(window).scroll(function () {
        var top = $(this).scrollTop(),
            sheight = $(document).height(),
            scrll = (top / sheight);

        var position = (scrll)*100;    
        $("#progress_bar").attr('value', position);
     });
 });
</script>


<progress id="progress_bar" value="0" max="80" style="position:fixed; top:15px;" ></progress>
<br /><br /><br />
text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

text1<br /><br />
text2<br /><br />
text3<br /><br />
text4<br /><br />
text5<br /><br />

Comments

Popular posts from this blog

how to add new line in google form questions | Fix for next line issue in google form questions

How to add new line in dropdown type question in google forms