API tools faq
paste
Advertisement
artsja

Scroll Tabs Vertical

artsja
Jun 25th, 2016
280
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.28 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. /* TWO TABS */
  4.  
  5.  
  6.  
  7. <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '0px'; document.getElementById('div2').style.top = '310px';">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-310px'; document.getElementById('div2').style.top = '0px';">LINK 2</a>
  8.  
  9. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  10. <div id="div1" style="background: #000; position:absolute; left:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; left:0px; toptop:310px; width:500px; height:300px; transition: all 2s">div2</div>
  11. </div>
  12.  
  13.  
  14.  
  15. a
  16. /* THREE TABS */
  17.  
  18.  
  19.  
  20. <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '0px'; document.getElementById('div2').style.top = '310px'; document.getElementById('div3').style.top = '620px'; document.getElementById('div4').style.top = '-930px'">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-310px'; document.getElementById('div2').style.top = '0px'; document.getElementById('div3').style.top = '310px'; document.getElementById('div4').style.top = '620px'">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-620px'; document.getElementById('div2').style.top = '-310px'; document.getElementById('div3').style.top = '0px'; document.getElementById('div4').style.top = '310px'">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-930px'; document.getElementById('div2').style.top = '-620px'; document.getElementById('div3').style.top = '-310px'; document.getElementById('div4').style.top = '0px'">LINK 4</a>
  21.  
  22. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  23. <div id="div1" style="background: #000; position:absolute; top:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:310px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:620px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:930px; width:500px; height:300px; transition: all 2s">div4</div>
  24. </div>
  25.  
  26.  
  27.  
  28. /* FOUR TABS */
  29.  
  30.  
  31.  
  32. <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '0px'; document.getElementById('div2').style.top = '310px'; document.getElementById('div3').style.top = '620px’; document.getElementById('div4’).style.top = '930px' “>LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-310px'; document.getElementById('div2').style.top = '0px'; document.getElementById('div3').style.top = '310px’; document.getElementById('div4’).style.top = '620px'“>LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-620px'; document.getElementById('div2').style.top = '-310px'; document.getElementById('div3').style.top = '0px’; document.getElementById('div4’).style.top = ‘310px'“>LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-930px'; document.getElementById('div2').style.top = ‘-620px'; document.getElementById('div3').style.top = ‘-310px’; document.getElementById('div4’).style.top = ‘0px’“>LINK 4</a>
  33.  
  34. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  35. <div id="div1" style="background: #000; position:absolute; top:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:310px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:620px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4” style="background: #000; position:absolute; top:930px; width:500px; height:300px; transition: all 2s">div4</div>
  36. </div>
  37.  
  38.  
  39.  
  40.  
  41. /* FIVE TABS */
  42.  
  43.  
  44.  
  45. <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '0px'; document.getElementById('div2').style.top = '310px'; document.getElementById('div3').style.top = '620px'; document.getElementById('div4').style.top = '930px'; document.getElementById('div5').style.top = '1240px' ">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-310px'; document.getElementById('div2').style.top = '0px'; document.getElementById('div3').style.top = '310px'; document.getElementById('div4').style.top = '620px'; document.getElementById('div5').style.top = '930px' ">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-620px'; document.getElementById('div2').style.top = '-310px'; document.getElementById('div3').style.top = '0px'; document.getElementById('div4').style.top = '310px'; document.getElementById('div5').style.top = '620px' ">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-930px'; document.getElementById('div2').style.top = '-620px'; document.getElementById('div3').style.top = '-310px'; document.getElementById('div4').style.top = '0px'; document.getElementById('div5').style.top = '310px'">LINK 4</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-1240px'; document.getElementById('div2').style.top = '-930px'; document.getElementById('div3').style.top = '-620px'; document.getElementById('div4').style.top = '-310px'; document.getElementById('div5').style.top = '0px'">LINK 5</a>
  46.  
  47. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  48. <div id="div1" style="background: #000; position:absolute; top:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:310px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:620px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:930px; width:500px; height:300px; transition: all 2s">div4</div> <div id="div5" style="background: #000; position:absolute; top:1240px; width:500px; height:300px; transition: all 2s">div5</div>
  49. </div>
  50.  
  51.  
  52.  
  53.  
  54. /* SIX TABS */
  55.  
  56.  
  57.  
  58. <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '0px'; document.getElementById('div2').style.top = '310px'; document.getElementById('div3').style.top = '620px'; document.getElementById('div4').style.top = '930px'; document.getElementById('div5').style.top = '1240px'; document.getElementById('div6').style.top = '1550px' ">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-310px'; document.getElementById('div2').style.top = '0px'; document.getElementById('div3').style.top = '310px'; document.getElementById('div4').style.top = '620px'; document.getElementById('div5').style.top = '930px'; document.getElementById('div6').style.top = '1240px'">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-620px'; document.getElementById('div2').style.top = '-310px'; document.getElementById('div3').style.top = '0px'; document.getElementById('div4').style.top = '310px'; document.getElementById('div5').style.top = '620px'; document.getElementById('div6').style.top = '930px'">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-930px'; document.getElementById('div2').style.top = '-620px'; document.getElementById('div3').style.top = '-310px'; document.getElementById('div4').style.top = '0px'; document.getElementById('div5').style.top = '310px'; document.getElementById('div6').style.top = '620px'">LINK 4</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-1240px'; document.getElementById('div2').style.top = '-930px'; document.getElementById('div3').style.top = '-620px'; document.getElementById('div4').style.top = '-310px'; document.getElementById('div5').style.top = '0px'; document.getElementById('div6').style.top = '310px'">LINK 5</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.top = '-1550px'; document.getElementById('div2').style.top = '-1240px'; document.getElementById('div3').style.top = '-930px'; document.getElementById('div4').style.top = '-620px'; document.getElementById('div5').style.top = '-310px'; document.getElementById('div6').style.top = '0px'">LINK 6</a>
  59.  
  60. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  61. <div id="div1" style="background: #000; position:absolute; top:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:310px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:620px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:930px; width:500px; height:300px; transition: all 2s">div4</div> <div id="div5" style="background: #000; position:absolute; top:1240px; width:500px; height:300px; transition: all 2s">div5</div> <div id="div6" style="background: #000; position:absolute; top:1240px; width:500px; height:300px; transition: all 2s">div6</div>
  62. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!