Have you seen websites that add a smooth mouse wheel scroll effect? This is a great way to make the scroll movement smooth as it gives your users a better scrolling experience while reading long content. Recently, one of our users asked us about adding a smooth mouse wheel scroll effect in blogger. In this article, we will show you how to add smooth mouse wheel scroll effect in blogger.
Smooth mouse wheel scrolling effect makes your site easier to navigate. It adds vertical scrolling on your site allowing you to smoothly scroll up/down the webpage using mouse wheel
The very first thing you need to do is to go to Blogger >> Template >> Edit HTML, now in the template search for the </head> tag. After finding the </head> tag, just above it paste the following code.
Now again in the template, search for </body> and just above it paste the following 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 key in defaults ) {if ( ! settings.hasOwnProperty( key ) ) {settings[ key ] = defaults[ key ];}}// Disable in mobile because we don't need smooth scrolling thereif ( 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 current scroll*/GambitSmoothScroll.prototype.stop = function( isDown, timestamp ) {if ( typeof this.scrollInterval !== 'undefined' ) {this.startedAsTrackpad = false;clearInterval( this.scrollInterval );this.scrollInterval = undefined;}};/*** Performs the smooth page scroll*/GambitSmoothScroll.prototype.newScroll = function( isDown, timestamp ) {// If the scroll went the opposite way, reset the scroll as if from full stopif ( isDown !== this.isDown && typeof this.isDown !== 'undefined' ) {this.stop();}this.isDown = isDown;// If called to scroll from a full stop, create our scroller loopif ( typeof this.scrollInterval === 'undefined' ) {this.startingSpeed = this.settings.amount;this.scrollInterval = setInterval( function() {// Perform the scrollvar scrollBy = ( this.isDown ? 1 : -1 ) * this.startingSpeed / 15;window.scrollBy( 0, scrollBy );// Stop the scroller when the scroll becomes too smallthis.startingSpeed *= 1 - ( 900 / this.settings.speed ) / 10; // 0.9;if ( Math.abs( scrollBy ) < 1 ) {this.stop();}}.bind(this), 16.666666667 ); // 60fps// If called while the page is still scrolling, add more momentum to the current scroll} else {// Base the momentum multiplier on the delta time to avoid super fast scrollsvar multiplier = 1 + ( timestamp - this.prevTimestamp ) / 40 * 0.7;// Limit the amountthis.startingSpeed = Math.max( this.startingSpeed * multiplier, this.settings.amount );this.startingSpeed = Math.min( this.startingSpeed, 300 );}this.prevTimestamp = timestamp;};/*** Stops the default scroll behavior and does our own thing*/GambitSmoothScroll.prototype.overrideScroll = function(e) {// Normalize wheel delta scrollvar delta = e.wheelDelta ? -e.wheelDelta / 120 : (e.detail || e.deltaY) / 3;/*** Basically, when we check the delta variable, trackpads give out a value of < 1 && < -1* mouse wheel scrolls give out a value >= 1 || <= -1* We can use this to turn OFF smooth scrolling for trackpads.** IMPORTANT: Firefox in Mac somehow handles things differently.* the skipCheck variable handles things for FF in Macs*/// Special for Firefox-Macvar 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 we are using a trackpad and do the normal behaviorif ( ( 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, then scrolling will be smoothened// Disable normal scrollinge = e || window.event;
Note: Make sure your blogger template has jquery.min.js or jquery.js file. In case you are unable to find this file on your blogger template then add it manually. Add the following code below the <head> tag.<script type="text/javascript">new GambitSmoothScroll({amount: 150, // The scroll amountspeed: 900 // The scroll speed});</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>Once everything is done, save the template by pressing “Save Template” button and you have successfully added a cool smooth mouse wheel scroll effect in blogger.
We hope this tutorial has turn out to be useful for those who were looking to add a smooth parallax mouse wheel scroll using jQuery on to their websites. If you have a better way of doing this job then feel free to leave a comment below. If you like this article, share it on Facebook, Twitter or Google+.
Post a Comment
If you have any Questions related to the above post. You can comment below in comment box. I will be happy to Answer you !