在 Aside 中使用 scrollTop 而不是 html,body

Question

我尝试使用 scrollTop ，当用户单击 ( li ) 元素时，我从 (li 获得 (data-id) ) 并滚动到旁边具有相同 ID 的框；

问题是当我点击例如 (li) 数字 2 一切都很好但是当我再次点击它时滚动回到顶部如果你快速点击它会变得最糟糕

var aside = $('.aside');

$("li").on('click',function (){

 id = $(this).data("id")

 $('.aside').animate({
            scrollTop: $('div.item[data-id="' + id + '"]').offset().top
        }, 300, 'linear')

});

 
 html,body {
  width: 100%;
  height: 100%;
  float: right;
  margin:0;
  padding: 0;
 }

.aside {
 height: 100%;
 width: 400px;
 position: fixed;
 top: 0;
 right:0;
 background: #ccc;
 overflow-y: scroll;
}

.estateWrap {
 width: 100%;
 height: 100%;
 float: right;
 margin: 0;
 padding: 0;
}

.item {
 float: right;
 margin: 0px;
 padding:0px;
 width: 100%;
 height: 150px;
 background: #f5f5f5;
 margin-bottom: 100px
}

<html>
<head>
 <meta charset="UTF-8">
 <title> index </title>
 <script src="jQuery.min.js"></script>
</head>
<body>

 <ul>
  <li data-id="1">1</li>
  <li data-id="2">2</li>
  <li data-id="3">3</li>
  <li data-id="4">4</li>
 </ul>


<div class="aside">
 <div class="estateWrap">
  <div class="item" data-id="1">1</div>
  <div class="item" data-id="2">2</div>
  <div class="item" data-id="3">3</div>
  <div class="item" data-id="4">4</div>
 </div>
</div>

</body>
</html>

Answer 1

使用位置而不是偏移量：

position();

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Answer 2

您需要考虑 item 元素的偏移顶部位置在滚动后发生变化。最高值变为 0。这就是为什么在您再次单击相同的 link 后，它会一直上升到 0。

您可以像这样添加父元素的当前顶部位置：

var aside = $('.aside');

function scrollAside (topPos) {
    aside.animate({
        scrollTop: topPos
    }, 300, 'linear')
}

$("li").on('click',function () {
    var id = $(this).data("id"),
        crntScrollPos = aside.scrollTop(),
        top = $('div.item[data-id="' + id + '"]').offset().top;
    if (top + crntScrollPos !== crntScrollPos) {
        scrollAside(top + crntScrollPos);
    }
});

html,body {
    width: 100%;
    height: 100%;
    float: right;
    margin:0;
    padding: 0;
}

.aside {
    height: 100%;
    width: 400px;
    position: fixed;
    top: 0;
    right:0;
    background: #ccc;
    overflow-y: scroll;
}

.estateWrap {
    width: 100%;
    height: 100%;
    float: right;
    margin: 0;
    padding: 0;
}

.item {
    float: right;
    margin: 0px;
    padding:0px;
    width: 100%;
    height: 150px;
    background: #f5f5f5;
    margin-bottom: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
    <li data-id="1">1</li>
    <li data-id="2">2</li>
    <li data-id="3">3</li>
    <li data-id="4">4</li>
</ul>


<div class="aside">
    <div class="estateWrap">
        <div class="item" data-id="1">1</div>
        <div class="item" data-id="2">2</div>
        <div class="item" data-id="3">3</div>
        <div class="item" data-id="4">4</div>
    </div>
</div>

在 Aside 中使用 scrollTop 而不是 html,body

use scrollTop in Aside not the html,body

html

javascript

css

jquery

scrolltop