重復單擊時單擊事件中的jQuery scrollTop無法正常工作

Question

在我的HTML，我有一個<div>稱為lastText在另一個底部<div> 我需要單擊一個按鈕並滾動到lastText 。 當我單擊按鈕時，它會滾動到<div>但是當我再次單擊它時，它會滾動到頂部和底部之間的某個位置。 當我滾動到中間的某個位置並單擊按鈕時，它不會滾動到lastText 。 因此，基本上，只有當我從最上方開始滾動時，滾動才能正常工作。 從<div>中的任意位置單擊按鈕時，我需要滾動到lastText 。 我該如何解決？

這是代碼：

http://jsfiddle.net/aQpPc/202/

Answer 1

您可以做的是使用類似於scrollTop: $('WhereYouWantToScroll').offset().top的函數scrollTop: $('WhereYouWantToScroll').offset().top因此，如果在div的頂部和底部之間進行if切換，則可以輕松完成您的示例

  var isTop = true; function test() { if(isTop){ $('#scrollTest').animate({ scrollTop: $('#lastText').offset().top }, 1000); } else{ $('#scrollTest').animate({ scrollTop: $('#scrollTest').offset().top + -10 }, 1000); } isTop = !isTop; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scrollTest" style="height : 100px; overflow : auto;"> 1 - Long Div Scrolling text <br/> 2 - Long Div Scrolling text <br/> 3 - Long Div Scrolling text <br/> 4 - Long Div Scrolling text <br/> 5 - Long Div Scrolling text <br/> 6 - Long Div Scrolling text <br/> 7 - Long Div Scrolling text <br/> 8 - Long Div Scrolling text <br/> 9 - Long Div Scrolling text <br/> 10 - Long Div Scrolling text <br/> 11 - Long Div Scrolling text <br/> 12 - Long Div Scrolling text <br/> 13 - Long Div Scrolling text <br/> 14 - Long Div Scrolling text <br/> 15 - Long Div Scrolling text <br/> 16 - Long Div Scrolling text <br/> 17 - Long Div Scrolling text <br/> <div id="lastText">last</div> </div> <button type="button" onclick="test()">scroll down</button> 

Answer 2

純Javascript解決方案：

 function test() { let el = document.getElementById("lastText"); el.scrollIntoView({behavior: "smooth"}); } 

 <div id="scrollTest" style="height : 100px; overflow : auto;"> 1 - Long Div Scrolling text <br/> 2 - Long Div Scrolling text <br/> 3 - Long Div Scrolling text <br/> 4 - Long Div Scrolling text <br/> 5 - Long Div Scrolling text <br/> 6 - Long Div Scrolling text <br/> 7 - Long Div Scrolling text <br/> 8 - Long Div Scrolling text <br/> 9 - Long Div Scrolling text <br/> 10 - Long Div Scrolling text <br/> 11 - Long Div Scrolling text <br/> 12 - Long Div Scrolling text <br/> 13 - Long Div Scrolling text <br/> 14 - Long Div Scrolling text <br/> 15 - Long Div Scrolling text <br/> 16 - Long Div Scrolling text <br/> 17 - Long Div Scrolling text <br/> <div id="lastText">last</div> </div> <button type="button" onclick="test()">scroll down</button>