0

Если таблица, где каждая строка имеет свой id так же есть ряд элементов с ссылками содержащими id -

href ='"#"+id'

При нажатии на элемент таблица скролится к элементу строки таблицы. Использую я для этого такой скрипт:

$(document).ready(function () {
    $('.a').click(function () {
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) {
            $('html, body').animate({scrollTop: $(scroll_el).offset().top}, 500);
        }
        return false;
    });
});

И у меня 2 проблемы:

  1. Скрипт срабатывает 1 раз(закидывает в адресную строку #id), и больше при нажатии ничего не происходит.
  2. Скрипт работает не плавно, а мгновенно (все файлы js подключены и обновлены, всё остальное работает)
3
  • ru.stackoverflow.com/questions/73455/…
    – Visman
    25 мар 2017 в 12:08
  • Visman, ну я так и сделал. но работает с проблемами 25 мар 2017 в 12:37
  • все потому, что ссылка это элемент а, а ты добавляешь обработчик для элементов с классом а. Скорее всего, тебе надо просто убрать точку: $('.a') -> $('a')
    – Grundy
    26 мар 2017 в 17:31

1 ответ 1

0

Я так обычно решаю (без проверки, а по фильтру+data):

$('.link').on('click', function(e){
  e.preventDefault();

  var link = $(this).attr('href');

  var dir = link.replace(/#/, ''),
      section = $('.section').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top;

  
  $('html, body').animate({scrollTop: pos}, 1000);
});
.section  {
  height: 500px;
  border: 1px solid #ccc;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>
  
  <div class="section" data-section="item-1">1</div>
  <div class="section" data-section="item-2">2</div>
  <div class="section" data-section="item-3">3</div>

С таблицей:

$('.link').on('click', function(e){
  e.preventDefault();

  var link = $(this).attr('href');

  var dir = link.replace(/#/, ''),
      section = $('tr').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top;

  
  $('html, body').animate({scrollTop: pos}, 1000);
});
tr  {
  height: 500px;
  border: 1px solid #ccc;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  

<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>
  
<table>
  <tr data-section="item-1">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-2">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-3">
    <td>td</td>
    <td>td</td>
  </tr>
</table>

Вариант с таблицей и до середины ячейки:

$('.link').on('click', function(e){
  e.preventDefault();

  var link = $(this).attr('href');

  var dir = link.replace(/#/, ''),
      section = $('tr').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top +section.height()/2;
  
  
  $('html, body').animate({scrollTop: pos}, 1000);
});
table {
  width: 100%;
}

tr  {
  height: 500px;
  background: #ccc;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  

<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>
  
<table>
  <tr data-section="item-1">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-2">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-3">
    <td>td</td>
    <td>td</td>
  </tr>
</table>

8
  • Ну вот тоже самое, при второй попытке нажать - ни ссылка старая с адресной строки не убирается, ни скрипт не работает. И выдаёт Uncaught TypeError: Cannot read property 'top' of undefined 25 мар 2017 в 14:24
  • кликаю второй раз по ссылке и все ок, все без ошибок
    – SVE
    25 мар 2017 в 14:39
  • Да всё отлично поправил у себя ошибку. А есть ли возможность выбранный объект центрировать не в самом верху и по середине. И плавность всё равно не работает. Всё просиходит мгновенно 25 мар 2017 в 14:47
  • @BagajokDota, видимо еще какая-то ошибка раз не плавно, у меня то плавность в примере работает. А по поводу середины, не совсем понятно что Вы имеете ввиду. Варьируйте pos как необходимо.
    – SVE
    25 мар 2017 в 15:10
  • всё получилось, только непонятно как регулировать pos. Нужно посередине 26 мар 2017 в 17:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.