Question

我有一个固定高度的div，以及overflow-y: scroll;的样式属性。我需要知道如何使用JQuery滚动到这个div的底部。我发现的所有解决方案都涉及动画主体和html，但我还没有找到用overflow-y: scroll;滚动div的解决方案。

以下代码就是我所拥有的，但它会立即滚动到底部;我需要一个平滑的滚动。

$('#my-div').animate({scrollTop: $('#my-div').height()}, 'slow');

提前致谢。

Answer 1

这是：

＆＃13;

$(window).on('load', function(){

  $('.button').on('click', function(){
  
    if ($('.scroller').scrollTop() == 0){
      $('.scroller').animate({'scrollTop': $('.scroller')[0].scrollHeight - $('.scroller').height()}, 1000)
    } else {
      $('.scroller').animate({'scrollTop': 0}, 1000)
    }
    
  })

})

＆＃13;

.scroller {
  height: 100px;
  overflow-y: scroll;
}

.button {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click me again!</div>
<div class="scroller">
  <pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Integer sagittis feugiat erat non varius. 
    Integer molestie mauris et turpis hendrerit, in pulvinar eros pulvinar. 
    Praesent turpis ex, dapibus et pharetra fermentum, faucibus at lectus. 
    Curabitur sollicitudin aliquam sem vel commodo. 
    Vivamus porta, lorem eu gravida luctus. 
    Ipsum metus sodales neque, vel mattis dui metus non nunc. 
    Phasellus ex dui, interdum ut ante sit amet, pretium aliquam risus. 
    Cras elementum lacus non orci scelerisque. 
    Nec finibus nulla dictum. 
    Orci varius natoque penatibus et magnis dis parturient montes. 
    Nascetur ridiculus mus. 
    Donec sed sagittis arcu. Suspendisse potenti. 
    Vestibulum elementum luctus pharetra. 
    Donec scelerisque eros vitae quam faucibus, vel pellentesque sapien efficitur.
  </pre>
</div>

＆＃13;

说明：您需要使用dom属性scrollheight来获取可滚动的内容高度。为了获得更好的效果，请仅滚动到内容的末尾完全可见的位置。

Answer 2

似乎在我的例子中工作。检查你是否拥有jquery滚动函数的所有正确值。

function scrollMe() {

    $("#myScrollDiv").animate( { scrollTop: 50 }, 1000);
    
}

#myScrollDiv {
  overflow-y: auto;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="scrollMe()">scrollMe</button>
<div id="myScrollDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam elit vel dolor molestie, commodo malesuada nibh fringilla. Mauris tristique semper nulla, vel pulvinar sapien luctus eget. Mauris vel ipsum ac justo dapibus iaculis. Etiam ornare eros at purus posuere, eu fermentum est vestibulum. Suspendisse non sapien elementum, lobortis justo ut, cursus dolor. Sed dolor ligula, vehicula eu suscipit id, interdum fermentum urna. Vivamus eu tincidunt erat. Sed id finibus urna, eget rhoncus metus. Nam gravida ante quis mauris tincidunt, non aliquam lorem consequat.
<br>
Cras nec sodales nisi. Donec velit diam, aliquam non ornare et, dignissim nec odio. Aliquam erat volutpat. Proin feugiat, erat eu ullamcorper sagittis, mauris nulla ornare eros, at blandit turpis augue vel turpis. Curabitur porttitor non nisi ut volutpat. Vestibulum massa enim, finibus quis massa molestie, tempor feugiat sem. Aliquam eu sem ac dui ullamcorper blandit. Duis sit amet neque quis nunc fermentum tempor. Curabitur pellentesque ipsum vitae orci mollis tincidunt. Suspendisse dictum quis turpis quis cursus. Cras volutpat sapien eu velit euismod iaculis. Nulla posuere est at dui iaculis, sit amet convallis libero lacinia. Vivamus non blandit tellus. Fusce placerat hendrerit dolor, vel rhoncus mauris interdum venenatis.
<br>
Praesent mauris tortor, pretium sit amet nunc sed, ultricies porttitor massa. Vivamus vestibulum lobortis ex. Pellentesque non vehicula libero, ac bibendum ligula. Integer placerat, mi et suscipit vulputate, nisi purus maximus arcu, non tristique libero ante non diam. Ut vel purus sed metus euismod convallis. Etiam sit amet venenatis metus. Integer at neque dolor. Mauris maximus semper dignissim. Ut pharetra dui magna, eu feugiat turpis lacinia vitae. Suspendisse semper nisi a tortor aliquam sagittis. Pellentesque convallis imperdiet metus ac elementum. Cras elementum sodales vestibulum. Mauris placerat augue eget augue convallis elementum.
<br>
Quisque vulputate magna maximus enim gravida egestas. Mauris nec augue tempor, consectetur turpis et, gravida ipsum. Etiam mollis velit in risus efficitur commodo. Proin rhoncus massa et dui pretium, eu scelerisque velit lacinia. In nec orci quis mi volutpat ullamcorper. Nulla bibendum nibh dolor, a bibendum ipsum pharetra a. Aliquam vel erat blandit, lobortis massa in, lobortis velit. Duis et malesuada sem.
<br>
Pellentesque quis sapien at magna malesuada aliquet eu ac quam. Fusce at risus orci. Phasellus luctus fringilla tincidunt. Duis ornare ex at purus suscipit, et tempus ipsum finibus. Mauris non aliquam dui. Proin in nulla a quam fermentum rhoncus sed a neque. Phasellus mattis, mauris ut fermentum hendrerit, libero nunc ultrices ante, a sollicitudin metus metus quis diam. Sed porttitor elit nec ante efficitur, sit amet convallis neque venenatis. Duis id ultricies mauris, at bibendum leo. Quisque et nibh eu sapien viverra gravida nec quis sem. Praesent et urna mattis, ultrices nunc quis, efficitur neque. Integer blandit neque interdum pellentesque aliquam.
</div>

JQuery - 在div中平滑滚动

2 个答案: