Smooth mouse bike scrolling number makes your site easier to navigate. It adds vertical scrolling on your site allowing you lot to smoothly scroll up/down the webpage using mouse wheel
The really showtime affair you lot demand to practise is to popular off to Blogger >> Template >> Edit HTML, forthwith inwards the template search for the </head> tag. After finding the </head> tag, but to a higher house it glue the next code.
<script type='text/javascript'>
/*<![CDATA[*/
/**
*Smooth Scroll Mouse Wheel By Mybloggerlab.com
*/
(function() {
this.GambitSmoothScroll = function( settings ){
if ( typeof settings === 'undefined' ) {
settings = {};
}
var defaults = {
'amount': 150,
'speed': 900
};
for ( var telephone substitution inwards defaults ) {
if ( ! settings.hasOwnProperty( telephone substitution ) ) {
settings[ telephone substitution ] = defaults[ telephone substitution ];
}
}
// Disable inwards mobile because nosotros don't demand shine scrolling there
if ( navigator.userAgent.match(/Mobi/)) {
return;
}
this.settings = settings;
this.startedAsTrackpad = false;
this.start();
};
/**
* Start our plugin
*/
GambitSmoothScroll.prototype.start = function() {
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener( 'wheel', this.overrideScroll.bind(this) );
}.bind(this));
};
/**
* Stops the electrical flow scroll
*/
GambitSmoothScroll.prototype.stop = function( isDown, timestamp ) {
if ( typeof this.scrollInterval !== 'undefined' ) {
this.startedAsTrackpad = false;
clearInterval( this.scrollInterval );
this.scrollInterval = undefined;
}
};
/**
* Performs the shine page scroll
*/
GambitSmoothScroll.prototype.newScroll = function( isDown, timestamp ) {
// If the scroll went the contrary way, reset the scroll equally if from total stop
if ( isDown !== this.isDown && typeof this.isDown !== 'undefined' ) {
this.stop();
}
this.isDown = isDown;
// If called to scroll from a total stop, create our scroller loop
if ( typeof this.scrollInterval === 'undefined' ) {
this.startingSpeed = this.settings.amount;
this.scrollInterval = setInterval( function() {
// Perform the scroll
var scrollBy = ( this.isDown ? 1 : -1 ) * this.startingSpeed / 15;
window.scrollBy( 0, scrollBy );
// Stop the scroller when the scroll becomes also small
this.startingSpeed *= 1 - ( 900 / this.settings.speed ) / 10; // 0.9;
if ( Math.abs( scrollBy ) < 1 ) {
this.stop();
}
}.bind(this), 16.666666667 ); // 60fps
// If called spell the page is yet scrolling, add together to a greater extent than momentum to the electrical flow scroll
} else {
// Base the momentum multiplier on the delta fourth dimension to avoid super fast scrolls
var multiplier = 1 + ( timestamp - this.prevTimestamp ) / xl * 0.7;
// Limit the amount
this.startingSpeed = Math.max( this.startingSpeed * multiplier, this.settings.amount );
this.startingSpeed = Math.min( this.startingSpeed, 300 );
}
this.prevTimestamp = timestamp;
};
/**
* Stops the default scroll deportment in addition to does our ain thing
*/
GambitSmoothScroll.prototype.overrideScroll = function(e) {
// Normalize bike delta scroll
var delta = e.wheelDelta ? -e.wheelDelta / 120 : (e.detail || e.deltaY) / 3;
/**
* Basically, when nosotros depository fiscal establishment check the delta variable, trackpads give out a value of < 1 && < -1
* mouse bike scrolls give out a value >= 1 || <= -1
* We tin utilization this to plough OFF shine scrolling for trackpads.
*
* IMPORTANT: Firefox inwards Mac somehow handles things differently.
* the skipCheck variable handles things for FF inwards Macs
*/
// Special for Firefox-Mac
var skipCheck = false;
if ( typeof window.mozInnerScreenX !== 'undefined' ) {
if ( navigator.platform.indexOf( 'Mac' ) !== -1 ) {
this.startedAsTrackpad = false;
skipCheck = true;
if ( e.deltaY === parseInt( e.deltaY, 10 ) ) {
this.startedAsTrackpad = true;
return;
}
}
}
if ( typeof this.trackpadTimeout !== 'undefined' ) {
clearTimeout( this.trackpadTimeout );
this.trackpadTimeout = undefined;
}
// If delta is less than 1, assume that nosotros are using a trackpad in addition to practise the normal behavior
if ( ( Math.abs( delta ) < 1 || this.startedAsTrackpad ) && ! skipCheck ) {
this.trackpadTimeout = setTimeout( function() {
this.startedAsTrackpad = false;
this.trackpadTimeout = undefined;
}.bind(this), 200 );
this.startedAsTrackpad = true;
return true;
}
// If the code reaches here, hence scrolling volition survive smoothened
// Disable normal scrolling
e = e || window.event;
if ( e.preventDefault ) {
e.preventDefault();
}
e.returnValue = false;
// Perform our ain scrolling
this.newScroll( delta > 0, e.timeStamp );
};
}());
/*]]>*/
</script>
Now over again inwards the template, search for </body> and but to a higher house it glue the next code.
<script type="text/javascript">
novel GambitSmoothScroll({
amount: 150, // The scroll amount
speed: 900 // The scroll speed
});
</script>
Note: Make certain your blogger template has jquery.min.js or jquery.js file. In illustration you lot are unable to uncovering this file on your blogger template hence add together it manually. Add the next code below the <head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
Once everything is done, salvage the template past times pressing “Save Template” push in addition to you lot accept successfully added a cool shine mouse bike scroll number inwards blogger.
We promise this tutorial has plough out to survive useful for those who were looking to add together a shine parallax mouse bike scroll using jQuery on to their websites. If you lot accept a meliorate agency of doing this chore hence experience costless to exit a comment below. If you lot similar this article, portion it on Facebook, Twitter or Google+.
Comments