html - Smooth vertical tabbed navigation in pure javascript -

html - Smooth vertical tabbed navigation in pure javascript -

i want smooth transitioned vertical tabbed navigation this pure js solution.

i have tried not smooth , doesn't take content scrolled top of div.

lorem ipsum dolor sit down amet, consectetur adipisicing elit. error cupiditate veritatis laudantium possimus quia nulla ut accusantium, dolores consectetur tempora officiis nemo similique voluptates nostrum architecto, quas qui iste sapiente. <div class="wrapper"> <div id="left"> <a class="links_" href="#one_">tab 1</a> <a class="links_" href="#two_">tab 2</a> <a class="links_" href="#three_">tab 3</a> <a class="links_" href="#four_">tab 4</a> <a class="links_" href="#five_">tab 5</a> </div> <div id="main" class="main"> <div class="ctr" id="one_">1. lorem ipsum dolor sit down amet, consectetur adipisicing elit. cupiditate tenetur earum voluptate iste maxime in quod deleniti, omnis ipsam corporis atque veritatis facilis fugiat quisquam? illum odit ratione, recusandae doloremque.</div> <div class="ctr" id="two_">2. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div><div class="ctr" id="three_">3. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div><div class="ctr" id="four_">4. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div><div class="ctr" id="five_">5. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div> </div> </div> <script> (function() { var d = document; var getid = function(id) { homecoming d.getelementbyid(id); }; var getclass = function(cl) { homecoming d.getelementsbyclassname(cl); }; var link_ = getid("left"), first_ = getid("first"), main_ = getclass('ctr'), mid_= getid("main"), = document.getelementsbytagname("a"); // console.log(a); for(var i=0; i<=a.length;i++){ console.log(a[i]); a.onclick = function(){ var href = this.getattribute("href"); href = href.replace("#",""); d.getid(href).scrolltop = mid_.offsettop+first_.offsetheight; }; } })(); </script>

it's taking whole page top because i've used hyperlinks may be. solution?

fiddle demo

class="snippet-code-js lang-js prettyprint-override">(function() { // addevent wraper crossbroswer // can utilize addevent(element,"click"||"mouseover"||"mouseout",callbackfunction); if (typeof addeventlistener !== "undefined") { addevent = function(obj, evt, fn) { obj.addeventlistener(evt, fn, false); }; removeevent = function(obj, evt, fn) { obj.removeeventlistener(evt, fn, false); }; } else if (typeof attachevent !== "undefined") { addevent = function(obj, evt, fn) { var fnhash = "e_" + evt + fn; obj[fnhash] = function() { var type = event.type, relatedtarget = null; if (type === "mouseover" || type === "mouseout") { relatedtarget = (type === "mouseover") ? event.fromelement : event.toelement; } fn.call(obj, { target: event.srcelement, type: type, relatedtarget: relatedtarget, _event: event, preventdefault: function() { this._event.returnvalue = false; }, stoppropagation: function() { this._event.cancelbubble = true; } }); }; obj.attachevent("on" + evt, obj[fnhash]); }; } // magical animatescroll function take first paramter document element // sec parameter time in milisecond // 3rd callbackfunction when animation completed function animatescroll(elem, time, callbackfunction) { if (!elem) return; var = elem.offsettop; var = window.scrolly; var start = new date().gettime(), timer = setinterval(function() { var step = math.min(1, (new date().gettime() - start) / time); window.scrollto(0, (from + step * (to - from)) + 1); if (step == 1) { clearinterval(timer); callbackfunction(); }; }, 25); window.scrollto(0, (from + 1)); } var d = document; var getid = function(id) { homecoming d.getelementbyid(id); }; var getclass = function(cl) { homecoming d.getelementsbyclassname(cl); }; //temp array utilize alter url , document element dom var ar = ["one_", "two_", "three_", "four_", "five_"]; var link_ = getid("left"), first_ = getid("first"), main_ = getclass('ctr'), mid_ = getid("main"), = d.getelementsbytagname("a"); (var = 0; < a.length; i++) { a[i].val = i; //adding onclick function various tags addevent(a[i], "click", (function() { var element = getid(ar[this.val]); function callbackfun(ele) { var strchangehref = ar[ele]; //change hash url value window.location.hash = strchangehref; }; var getlastval = this.val; var returnval = function() { callbackfun(getlastval); }; animatescroll(element, 300, returnval); }), true); } })(); class="snippet-code-css lang-css prettyprint-override">#left { position: fixed; left: 0; top: 60px; } #left .links_ { padding: 30px 10px; border: 1px solid #eee; color: #888; font-size: 1.2em; text-transform: uppercase; display: block; } .main .ctr { width: 400px; height: 400px; margin-left: 100px; border: 1px solid #eee; padding: 20px } /*.main div{display: none;}*/ .main .ctr.shown { display: block; } class="snippet-code-html lang-html prettyprint-override"><div id="first">lorem ipsum dolor sit down amet, consectetur adipisicing elit. error cupiditate veritatis laudantium possimus quia nulla ut accusantium, dolores consectetur tempora officiis nemo similique voluptates nostrum architecto, quas qui iste sapiente.</div> <div class="wrapper"> <div id="left"> <a class="links_" href="javascript:;">tab 1</a> <a class="links_" href="javascript:;">tab 2</a> <a class="links_" href="javascript:;">tab 3</a> <a class="links_" href="javascript:;">tab 4</a> <a class="links_" href="javascript:;">tab 5</a> </div> <div id="main" class="main"> <div class="ctr" id="one_">1. lorem ipsum dolor sit down amet, consectetur adipisicing elit. cupiditate tenetur earum voluptate iste maxime in quod deleniti, omnis ipsam corporis atque veritatis facilis fugiat quisquam? illum odit ratione, recusandae doloremque.</div> <div class="ctr" id="two_">2. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div> <div class="ctr" id="three_">3. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div> <div class="ctr" id="four_">4. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div> <div class="ctr" id="five_">5. lorem ipsum dolor sit down amet, consectetur adipisicing elit. impedit reprehenderit, eveniet pariatur tempora deserunt nobis, asperiores odio quasi dolorem. eius soluta ullam atque nesciunt numquam enim, vitae recusandae animi aliquid!</div> </div> </div>

edit: added callbackfunction alter url. fiddle demo

javascript html css dom navigation