Форум

mrprim · #1 (**permalink**) 28.03.2017, 16:35

Недавно я обращался с таким же вопросом и мне ответили В ЭТОЙ ТЕМЕ! Но ответа оказалось мало и я спрашивал в комментах. И дальше тишина.

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, То следующий клик работает очень не предсказуемо.

рони · #2 (**permalink**) 28.03.2017, 16:58

mrprim,
делайте полноценный макет

mrprim · #3 (**permalink**) 28.03.2017, 17:43

Сообщение от рони

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>

рони · #4 (**permalink**) 28.03.2017, 18:10

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>

mrprim · #5 (**permalink**) 28.03.2017, 23:23

2 вопроса:
1) зачем создан event.preventDefault(); если дальше по коду вы нигде его не считываете?
2) код ничем не отличается от моего и проблема осталась. При каждом последующем клике таблица скроллится всё больше (КАК БУДТО ПРИБАВЛЯЯ ПРОШЛУЮ ПОЗИЦИЮ)
вот никак не могу понять почему

рони · #6 (**permalink**) 28.03.2017, 23:51

Сообщение от mrprim

зачем создан event.preventDefault();

Сообщение от mrprim

код ничем не отличается от моего и проблема осталась.

ничем более не могу вам помочь, а пример пусть будет
может кому пригодится.

mrprim · #7 (**permalink**) 29.03.2017, 14:13

Да понятно что пусть будет) но может кто знает как исправить баr с позицией?

рони · #8 (**permalink**) 29.03.2017, 14:14

Сообщение от mrprim

кто знает

никто не знает

Сообщение от рони

mrprim,
делайте полноценный макет

Форум

Справочник

Discord чат

Курсы javascript