A Pen by Александр Евгеньевич Киселёв

Thumbnail
This awesome code was written by keesik, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright keesik ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Александр Евгеньевич Киселёв</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="panel">
	<ul>
		<li><a href="#name-1">link 1</a></li>
		<li><a href="#name-2">link 2</a></li>
		<li><a href="#name-3">link 3</a></li>
		<li><a href="#name-4">link 4</a></li>
		<li><a href="#name-5">link 5</a></li>
		<li><a href="#name-6">link 6</a></li>
		<li><a href="#name-7">link 7</a></li>
		<li><a href="#name-8">link 8</a></li>
		<li><a href="#name-9">link 9</a></li>
		<li><a href="#name-10">link 10</a></li>
	</ul>
</div>

<div id="table1">
  <table>
    <tr id="name-1">
      <td>cell 1</td>
    </tr>
    <tr id="name-2">
      <td>cell 2</td>
    </tr>
    <tr id="name-3">
      <td>cell 3</td>
    </tr>
    <tr id="name-4">
      <td>cell 4</td>
    </tr>
    <tr id="name-5">
      <td>cell 5</td>
    </tr>
    <tr id="name-6">
      <td>cell 6</td>
    </tr>
    <tr id="name-7">
      <td>cell 7</td>
    </tr>
    <tr id="name-8">
      <td>cell 8</td>
    </tr>
    <tr id="name-9">
      <td>cell 9</td>
    </tr>
    <tr id="name-10">
      <td>cell 10</td>
    </tr>
    <tr id="name-11">
      <td>cell 11</td>
    </tr>
    <tr id="name-12">
      <td>cell 12</td>
    </tr>
    <tr id="name-13">
      <td>cell 13</td>
    </tr>
    <tr id="name-14">
      <td>cell 14</td>
    </tr>
    <tr id="name-15">
      <td>cell 15</td>
    </tr>
    <tr id="name-16">
      <td>cell 16</td>
    </tr>
    <tr id="name-17">
      <td>cell 17</td>
    </tr>
    <tr id="name-18">
      <td>cell 18</td>
    </tr>
    <tr id="name-19">
      <td>cell 19</td>
    </tr>
    <tr id="name-20">
      <td>cell 20</td>
    </tr>
    <tr id="name-21">
      <td>cell 21</td>
    </tr>
    <tr id="name-22">
      <td>cell 22</td>
    </tr>
    <tr id="name-23">
      <td>cell 23</td>
    </tr>
    <tr id="name-24">
      <td>cell 24</td>
    </tr>
    <tr id="name-25">
      <td>cell 25</td>
    </tr>
    <tr id="name-26">
      <td>cell 26</td>
    </tr>
    <tr id="name-27">
      <td>cell 27</td>
    </tr>
    <tr id="name-28">
      <td>cell 28</td>
    </tr>
    <tr id="name-29">
      <td>cell 29</td>
    </tr>
    <tr id="name-30">
      <td>cell 30</td>
    </tr>
    <tr id="name-31">
      <td>cell 31</td>
    </tr>
    <tr id="name-32">
      <td>cell 32</td>
    </tr>
    <tr id="name-33">
      <td>cell 33</td>
    </tr>
    <tr id="name-34">
      <td>cell 34</td>
    </tr>
    <tr id="name-35">
      <td>cell 35</td>
    </tr>
    <tr id="name-36">
      <td>cell 36</td>
    </tr>
    <tr id="name-37">
      <td>cell 37</td>
    </tr>
    <tr id="name-38">
      <td>cell 38</td>
    </tr>
    <tr id="name-39">
      <td>cell 39</td>
    </tr>
    <tr id="name-40">
      <td>cell 40</td>
    </tr>
    <tr id="name-41">
      <td>cell 41</td>
    </tr>
    <tr id="name-42">
      <td>cell 42</td>
    </tr>
    <tr id="name-43">
      <td>cell 43</td>
    </tr>
    <tr id="name-44">
      <td>cell 44</td>
    </tr>
    <tr id="name-45">
      <td>cell 45</td>
    </tr>
    <tr id="name-46">
      <td>cell 46</td>
    </tr>
    <tr id="name-47">
      <td>cell 47</td>
    </tr>
    <tr id="name-48">
      <td>cell 48</td>
    </tr>
    <tr id="name-49">
      <td>cell 49</td>
    </tr>
    <tr id="name-50">
      <td>cell 50</td>
    </tr>
    <tr id="name-51">
      <td>cell 51</td>
    </tr>
    <tr id="name-52">
      <td>cell 52</td>
    </tr>
    <tr id="name-53">
      <td>cell 53</td>
    </tr>
    <tr id="name-54">
      <td>cell 54</td>
    </tr>
    <tr id="name-55">
      <td>cell 55</td>
    </tr>
    <tr id="name-56">
      <td>cell 56</td>
    </tr>
  </table>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/keesik/a-pen-by-andx410andx43bandx435andx43aandx441andx430andx43dandx434andx440-andx415andx432andx433andx435andx43dandx44candx435andx432andx438andx447-andx41aandx438andx441andx435andx43bandx451andx432-vxVKVe */

.panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
}
.panel li {
	list-style: none;
	display: inline-block;
}
table {
  margin-top: 60px;
  width: 100%;
}
table td {
  border: 1px solid #999;
  padding: 2px;
}

/*Downloaded from https://www.codeseek.co/keesik/a-pen-by-andx410andx43bandx435andx43aandx441andx430andx43dandx434andx440-andx415andx432andx433andx435andx43dandx44candx435andx432andx438andx447-andx41aandx438andx441andx435andx43bandx451andx432-vxVKVe */
$('a').click(function(e){
  e.preventDefault();
  var _to = e.target.hash;
  console.log(_to);
  var row = $(_to);
  
  if (row.length > 0) {
    $('html').stop().animate({
      scrollTop : row.offset().top + ($("#table1").height() / 2) - (row.height() / 2)
    }, 2000, 'swing')
  }
})

Comments