Плавный скролл к элементу в таблице. И отображение элемента посередине окна
Недавно я обращался с таким же вопросом и мне ответили В ЭТОЙ ТЕМЕ! Но ответа оказалось мало и я спрашивал в комментах. И дальше тишина.
1) Проблема в следующем. Имеем объект <a href="name-1"> и <tr id="name-1"> При ПЕРВОМ клике - срабатывает следующее:
var scroll_el = $(this).attr('href');
var dir = scroll_el.replace(/#/, ''),
section = $('tr').filter('[id="' + dir + '"]'),
pos = section.offset().top + section.height()/2;
$('html, #rrs_table').animate({scrollTop: pos}, 500);
При клике данное значение section.offset().top = от -2000 до 17000 в зависимости от местоположения в таблице. А section.height()/2, которое должно прокрутку элемента остановить посередине окна браузера имеет значение = 17. следовательно сложение тысяч и "17" никак не влияет на работу функции. 2) Второй вопрос в том что при первом клике по <a> проходит скролл к объекту И ЕСЛИ ПЕРМЕННУЮ pos НЕ вернуть в значение 0, То следующий клик работает очень не предсказуемо. |
mrprim,
делайте полноценный макет |
Цитата:
<div id="table1"> <table> <tr id="name-1" class="line">...</tr> <tr id="name-2">...</tr> <tr id="name-3">...</tr> ... <tr id="name-56">...</tr> </table> </div>
.line{
width: 100%;
height: 25px;
line-height: 25px;
border: 1px solid #000;
}
.line td{
padding: 5px;
border-left: 1px solid #000;
}
Каждой строке в таблице - соответствует объект со ссылкой: <a id="point-1" href="name-1"> <a id="point-2" href="name-2"> <a id="point-3" href="name-3"> ... <a id="point-56" href="name-56"> Вот сам JS
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$('a').click(function () {
var scroll_el = $(this).attr('href');
var dir = scroll_el.replace(/#/, ''),
section = $('tr').filter('[id="' + dir + '"]'),
pos = section.offset().top + section.height()/2;
$('html, #table').animate({scrollTop: pos}, 500);
});
</script>
|
scroll на середину высоты видимой части
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>
|
2 вопроса:
1) зачем создан event.preventDefault(); если дальше по коду вы нигде его не считываете? 2) код ничем не отличается от моего и проблема осталась. При каждом последующем клике таблица скроллится всё больше (КАК БУДТО ПРИБАВЛЯЯ ПРОШЛУЮ ПОЗИЦИЮ) вот никак не могу понять почему |
Цитата:
Цитата:
ничем более не могу вам помочь, а пример пусть будет может кому пригодится. |
Да понятно что пусть будет) но может кто знает как исправить баr с позицией?
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 11:13. |