Smooth Direct Scroll To Anchor Link Via Mouse Or Keys

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.

Features:

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:

<style>
html, body {
height:100%;
padding:0;
margin:0;
}
.container {
height:500%;
width:100%;
padding:0;
}
.inner {
height:100vh;
width:100%;
background-color:#fc3;
}
</style>

JQuery:

<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
//Run OnLoad..................
// set to true to see the console.log debug info
var debug = false;
// setup default index of 0
var index = 0;
// setup scrolling flag
var scrolling = false;
// cache a few elements for reference
var win = $( window );
var body = $( 'body' );
var container = $( '.container' );
// setup a few more variables for future use
var lastTop = 0;
var current, offset;
// bind scroll event
win.on( 'scroll', function( ev ) {
// prevent the default event
ev.preventDefault();
// check to make sure we don't fire the scroll multiple times
if ( debug ) console.log( scrolling, 'scrolling' );
if ( scrolling ) return;
// set the scrolling flag to true
scrolling = true;
// run the update function
updateActive();
// clear the scrolling flag to allow the user to access the next element
setTimeout( function() { scrolling = false; }, 500 );
// update a few variables for the next interaction
current = container.find( '.inner[data-index='+index+']' );
offset = current.offset();
lastTop = offset.top;
// handle the animation
body.animate(
{ scrollTop : offset.top + 'px' }
);
});
function updateActive() {
// get the current top offset
var top = win.scrollTop();
// determine which direction we are scrolling
if ( top > lastTop ) {
// down
if ( debug ) console.log( 'scrolling down' );
// let make sure we aren't on the last element
if ( debug ) console.log( index, $( '.inner' ).length );
if ( index == $( '.inner' ).length - 1 ) {
if ( debug ) console.log( 'on last element, nothing to do' );
return;
}
// update index & top
if ( debug ) console.log( index, 'index before' );
index++;
if ( debug ) console.log( index, 'index after' );
lastTop = top;
} else {
// up
if ( debug ) console.log( 'scrolling up' );
// let make sure we aren't on the first element
if ( ! index ) {
if ( debug ) console.log( 'on first element, nothing to do' );
return;
}
// update index & top
if ( debug ) console.log( index, 'index before' );
index--;
if ( debug ) console.log( index, 'index after' );
lastTop = top;
}
}
//Run OnLoad..................
});
</script>

HTML:

<div class="container">
<div class="inner" data-index="0">Content 1 goes here</div>
<div class="inner" data-index="1">Content 2 goes here</div>
<div class="inner" data-index="2">Content 3 goes here</div>
<div class="inner" data-index="3">Content 4 goes here</div>
<div class="inner" data-index="4">Content 5 goes here</div>
<div class="inner" data-index="5">Content 6 goes here</div>
</div>

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…