2016 April 24 Archive - EXEIdeas – Let's Your Mind Rock

There are many smoot scrolling codes available online but as per different desire everyone has its own limitations so when it comes to a smoot scrolling direct to an anchor tag or link while using mouse wheel or keyboard keys then its hard to optimize any code with short and perfect work.So here we have a Direct Scroll To Anchor that will control your mouse when, scroll bar buttons and also keyboard keys so whenever user will press it tit will scroll direct to the next anchor beside knowing the size of first anchor so means you can scroll direct to a desires anchor link. Now fopr this just garb the Direct Scroll To Anchor code snippet and use it wherever you want Direct Scroll To Anchor.CLICK HERE TO SEE DEMOFeatures:1.) JQuery File Added.2.) JQuery Codes.3.) Stylish CSS Added.4.) Simple And Fast Loading Snippet.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:100vh;width:100%;background-color:#fc3;} JQuery: $(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..................}); HTML: Content 1 goes here Content 2 goes here Content 3 goes here Content 4 goes here Content 5 goes here Content 6 goes here Customization:1.) You Can Add More JQuery,JavaScript,HTML,CSS. 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 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…