jQuery Σελίδα κύλισης προόδου στο site σας!




[ LIVE DEMO ]


Aυτό το  jQuery προσθέτει μια κομψή γραμμή προόδου είτε στο επάνω είτε στο κάτω μέρος της σελίδας για να δώσει στους επισκέπτες σας μια καλύτερη αίσθηση του πόσο μακριά βρίσκονται κατά μήκος της σελίδας καθώς μετακινούνται προς τα πάνω και προς τα κάτω. 

Ως μπόνους, κάνοντας κλικ στη γραμμή προόδου, ο χρήστης μεταβαίνει στη θέση που βρίσκεται στη σελίδα όπου έπεσε ο χρήστης.






Αυτό είναι λειτουργικό σε όλα τα web site.

Αντιγραφή επικόλληση τον παρακάτω κώδικα:


<style>
.scrollindicator{
width: 100%;
height: 7px; /* height of progress bar */
display: block;
background: white;
left: 0;
bottom: 0; /* dock progress bar to bottom of page (change to "top" for top instead) */
cursor: pointer;
position: fixed;
z-index: 1000000;
visibility: hidden;
-webkit-transition: height .2s ease;
transition: height .2s ease;
}
.scrollprogress{
position: absolute;
width: 100%;
height: 100%;
background: purple; /* background color of progress bar */
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
=-webkit-transition: -webkit-transform .4s ease;
transition: transform .4s ease; /* animate progress bar? Remove to disable */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
/***********************************************
* jQuery Σελίδα κύλισης προόδου στο site σας!
* Project Page: http://www.foulscode.com/2018/02/jquery-site.html
***********************************************/
jQuery(function($){
var growmouseover = [true, '25px'] // magnify progress bar onmouseover? [Boolean, newheight]
///////// No need to edit beyond here /////////
var $indicatorparts = $(document.body).append('<div class="scrollindicator"><div class="scrollprogress"></div></div>')
var $indicatorMain = $indicatorparts.find('div.scrollindicator')
var $scrollProgress = $indicatorparts.find('div.scrollprogress')
var indicatorHeight = $indicatorMain.outerHeight()
var transformsupport = $scrollProgress.css('transform')
transformsupport = (transformsupport == "none" || transformsupport =="")? false: true
function syncscrollprogress(){
   var winheight = $(window).height()
   var docheight = $(document).height()
   var scrollTop = $(window).scrollTop()
   var trackLength = docheight - winheight
   var pctScrolled = Math.floor(scrollTop/trackLength * 100) // gets percentage scrolled (ie: 80 NaN if tracklength == 0)
$scrollProgress.css('transform', 'translate3d(' + (-100 + pctScrolled) + '%,0,0)')
}
if (transformsupport){
$indicatorMain.css('visibility', 'visible')
$indicatorMain.on('click', function(e){
var trackLength = $(document).height() - $(window).height()
var scrollamt = e.clientX/($(window).width()-32) * trackLength
$('html,body').animate({scrollTop: scrollamt}, 'fast')
})
if (growmouseover[0]){
$indicatorMain.on('mouseenter touchstart', function(e){
$(this).css('height', growmouseover[1])
e.stopPropagation()
})
$indicatorMain.on('mouseleave', function(e){
$(this).css('height', indicatorHeight)
})
$(document).on('touchstart', function(e){
$indicatorMain.css('height', indicatorHeight)
})
}
$(window).on("scroll load", function(){
requestAnimationFrame(syncscrollprogress)
})
}
})
</script>



Και στην συνεχεια αποθήκευση.

Έρχονται και αλλα..






Σχόλια