2015 November 27 Archive - EXEIdeas

Every website need a few attentions which could only be given by an amazing smoothness that will catch these potential customers eyes and let those to stay there that will increase your current benefits also. So take action but also need to worry about for your back conclude problems. There are many smooth scrolling JS are available on internet though the size are generally to high which could effect your current loading time so think hard before with them.This JavaScript-JQuery smooth scrolling made by using JQuery and JavaScript technique. It is pretty to have smoothness in your blog or web page scrolling by mouse wheel or mouse click and also on arrow keys to have this awesome effect. So now go for it and have the scroller on your web page now.CLICK HERE TO SEE DEMO Features:1.) Pure JavaScript Added.2.) External JQuery File.3.) Work On Mouse Wheel, Arrow Keys And Mouus Clicks..4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.CSS: html, body {height:100%;padding:0;margin:0;}.container {height:500%;width:100%;padding:0;}.inner {height:20%;width:100%;background-color:#fc3;}/* code will work for different height anchorsuncomment if you wanted to see it in action.inner:nth-child(odd) {height: 10%;}*/ HTML: Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here JavaScript: $(document).ready(function() {//Run OnLoad..................// set to true to see the console.log debug infovar debug = false;// setup default index of 0var index = 0;// setup scrolling flagvar scrolling = false;// cache a few elements for referencevar win = $( window );var body = $( 'body' );var container = $( '.container' );// setup a few more variables for future usevar lastTop = 0;var current, offset;// bind scroll eventwin.on( 'scroll', function( ev ) {// prevent the default eventev.preventDefault();// check to make sure we don't fire the scroll multiple timesif ( debug ) console.log( scrolling, 'scrolling' );if ( scrolling ) return;// set the scrolling flag to truescrolling = true;// run the update functionupdateActive();// clear the scrolling flag to allow the user to access the next elementsetTimeout( function() { scrolling = false; }, 500 );// update a few variables for the next interactioncurrent = container.find( '.inner[data-index='+index+']' );offset = current.offset();lastTop = offset.top;// handle the animationbody.animate({ scrollTop : offset.top + 'px' });});function updateActive() {// get the current top offsetvar top = win.scrollTop();// determine which direction we are scrollingif ( top > lastTop ) {// downif ( debug ) console.log( 'scrolling down' );// let make sure we aren't on the last elementif ( debug ) console.log( index, $( '.inner' ).length );if ( index == $( '.inner' ).length - 1 ) {if ( debug ) console.log( 'on last element, nothing to do' );return;}// update index & topif ( debug ) console.log( index, 'index before' );index++;if ( debug ) console.log( index, 'index after' );lastTop = top;} else {// upif ( debug ) console.log( 'scrolling up' );// let make sure we aren't on the first elementif ( ! index ) {if ( debug ) console.log( 'on first element, nothing to do' );return;}// update index & topif ( debug ) console.log( index, 'index before' );index--;if ( debug ) console.log( index, 'index after' );lastTop = top;}}//Run OnLoad..................}); Customization:1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.Last Words:That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…