[英]jQuery scrollTop in click event not working properly when clicking repeately
In my HTML, I have a <div>
called lastText
at the bottom of another <div>
. 在我的HTML,我有一个
<div>
称为lastText
在另一个底部<div>
I need to click a button and scroll to the lastText
. 我需要单击一个按钮并滚动到
lastText
。 When I click on the button, it scrolls to the <div>
but when I click it again it scrolls somewhere between top and bottom. 当我单击按钮时,它会滚动到
<div>
但是当我再次单击它时,它会滚动到顶部和底部之间的某个位置。 When I scroll to somewhere in middle, and click on the button it doesn't scroll to the lastText
. 当我滚动到中间的某个位置并单击按钮时,它不会滚动到
lastText
。 So basically scrolling is only working properly when I start to scroll from the very top. 因此,基本上,只有当我从最上方开始滚动时,滚动才能正常工作。 I need to scroll to
lastText
when click on the button from anywhere in the <div>
. 从
<div>
中的任意位置单击按钮时,我需要滚动到lastText
。 How can I solve this? 我该如何解决?
Here is the code: 这是代码:
http://jsfiddle.net/aQpPc/202/ http://jsfiddle.net/aQpPc/202/
What you can do is to use the function like this scrollTop: $('WhereYouWantToScroll').offset().top
So your example can easily be done with an if switching between top and bottom of the div 您可以做的是使用类似于
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>
Pure Javascript solution: 纯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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.