Smooth Scroll To Anchor Via Mouse And Arrows Jquery

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.

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:

<style>
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 anchors
uncomment if you wanted to see it in action
.inner:nth-child(odd) {
height: 10%;
}
*/
</style>

HTML:

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

JavaScript:

<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(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>

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…