jQuery-在div中平滑滾動

Question

我有一個固定高度的div，它的樣式屬性為overflow-y: scroll; 。 我需要知道如何使用JQuery滾動到該div的底部。 我發現的所有解決方案都可以對body和html進行動畫處理，但是我還沒有找到使用overflow-y: scroll;滾動div的解決方案overflow-y: scroll; 。

下面的代碼是我所擁有的，但是它立即滾動到底部。 我需要平滑滾動。

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

提前致謝。

Answer 1

這里是：

 $(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) } }) }) 

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

 <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> 

說明：您需要使用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>