У меня есть навигация, и я хочу, чтобы после нажатия на каждый li scrollTop в начало элемента, но после многократного нажатия на li он работает неправильно, и я знаю, почему, например, прокрутка уже есть 0, тогда верхняя часть элемента равна 50, прокрутите до 50, затем, если вы нажмете другой элемент со смещением вершины 150, прокрутка должна перейти к 150, но она перейдет к 200, потому что это сейчас на 50. Я попробовал две логики:

A. Выполняйте прокрутку до нуля каждый раз, когда пользователь нажимает, но это не сработало.

$('ul').stop().animate({
    scrollTop: 0 }, 0);

Б. Элемент вычитания смещает верхнюю часть текущей позиции прокрутки, но это тоже не сработало.

var aTop = parseInt($(this).offset().top);
var cTop = parseInt($('ul').scrollTop());
var offset = aTop - cTop;

Любая идея?

$('li').click(function() {
  var offset = $(this).offset().top;
  $('ul').animate({
    scrollTop: offset
  }, 500);
});
ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>
3
tour travel 26 Фев 2018 в 22:51

1 ответ

Лучший ответ

Вам нужно добавить верхнюю часть прокрутки элемента ul, а не убавлять ее:

var offset = $(this).offset().top + $(this).parent().scrollTop();

Фрагмент:

$('li').click(function() {
  var offset = $(this).offset().top + $(this).parent().scrollTop();

  $('ul').animate({
    scrollTop: offset
  }, 500);
});
ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>
2
Rick Hitchcock 26 Фев 2018 в 23:14