2014 May 17 Archive - EXEIdeas – Let's Your Mind Rock

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.CLICK HERE TO SEE DEMOFeatures: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 or link Next DIV .After adding this button, just add the below code before tag on you page. Nothing to do the rest. // Smooth Scroll To A Desired Up Or Down DIV// Code From: www.exeideas.comwindow.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);} Customization:You just have to enter your targeted DIV name where you want to scroll at targetedDIV. However you can add any extra codes with this too if you want. You can also hide the scrollbar through CSS to pressurize the user to use mouse wheel. You can also add CSS to your button whatever you want. You can also add unlimited button on a WebPage too.Last Words:This is what we have and as per our rule, we shared it with you. Now if you liked this then share it with your friends and leave your feedback and if you have any query related to this code, You can contact us freely and we will reply you as fast as we can. Stay with us because we have something more for you in our next post. Have a nice life!