Smooth Scroll To A Desired Up Or Down DIV OnClick Via Pure JavaScript

Many designers are now working on single page website as it is now a trend so to make that more awesome, nearly every are using smooth scrolling to the next DIV on single page site that will be a page. So for this, purpose, many are using JQuery and CSS3 that sometime are heavy and sometime are not compatible with old browsers.

Also if they use anchor links n a single page to scroll through that then it can mess up there URL like adding #DIV1, #DIV2 etc in the URL so that look bad. So for this purpose, we are here with another awesome and short code that is purely written in JavaScript and compatible to add browsers. It has all the effect like of CSS3 as smooth scrolling. You can scroll to any portion of page smoothly whether it is up or down onclick on your places button.

For this purpose, we got a CODE that we are sharing with you below that have more awesome features as you needed. Its short and clean with cross browsers compatibility and can be fully customizable. It can also easily mix up with your own code and can work with any code without conflicting. So without any more preface, here is the live working DEMO URL that can explain you more what we want to desire. After seeing this, check out our features of this code and then garb the code and see its editing below.

Features:

1.) Pure JavaScript Code.
2.) Quick To Load And Easy To Add.
3.) Cross Browser Compatibility.
4.) It Will Scroll Your Page On Y-Axis Only Through OnClick Anywhere.
5.) You Can Scroll X-Axis Through Mouse Click On ScrollBar Only.
6.) No JQuery Or Any External File.
7.) Short Code.
8.) Work On All Platform, Website, Blogger, WordPress.
9.) No CSS3.
10.) Will Not Conflict With Other Codes.

How To Use This Code?

So easy to use it. First you must have two DIV on your webpage and that should be UP/DOWN so this code will work. After adding those two DIV, add onclick=’smoothScroll(document.getElementById(“targetedDIV“))’  anywhere where you want to make a button like in image <img onclick=’smoothScroll(document.getElementById(“targetedDIV“))’  src=”http://www.iconsdb.com/icons/preview/black/next-l.png”/> or link <a onclick=’smoothScroll(document.getElementById(“targetedDIV“))’ >Next DIV</a> .After adding this button, just add the below code before </head> tag on you page. Nothing to do the rest.

<script type='text/javascript'>
// Smooth Scroll To A Desired Up Or Down DIV
// Code From: www.exeideas.com
window.smoothScroll = function(target) {
var scrollContainer = target;
do {
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do {
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 50) return;
c.scrollTop = a + (b - a) / 50 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 1);
}
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>