mrprim,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p{
height: 2000px;
}
.line{
width: 100%;
height: 25px;
line-height: 25px;
border: 1px solid #000;
}
.line td{
padding: 5px;
border-left: 1px solid #000;
}
hr{
position: fixed;
left: 0;
top: 50%;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('a[href^="name"]').click(function (event) {
event.preventDefault();
var scroll_el = $(this).attr('href'),
dir = scroll_el.replace(/#/, ''),
section = $('#'+dir),
pos = section.offset().top - ($(window).height()-section.height()+12)/2;
$('html, body').animate({scrollTop: pos}, 500);
});
});
</script>
</head>
<body>
<hr>
<a id="point-1" href="name-1">1</a>
<a id="point-2" href="name-2">2</a>
<a id="point-3" href="name-3">3</a>
<a id="point-56" href="name-56">56</a>
<p></p>
<div id="table1">
<table>
<tr id="name-1" class="line"><td>1</td></tr>
<tr id="name-2" class="line"><td>2</td></tr>
<tr id="name-3" class="line"><td>3</td></tr>
<tr id="name-56" class="line"><td>56</td></tr>
</table>
</div>
<p></p>
</body>
</html>