JavaScript 不会在第二次点击时滚动
[英]JavaScript doesn't scroll at second click
问题描述
I have this part of code
我有这部分代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#Button1").click(function () {
$('html, body').animate({
scrollTop: $("#Div1").offset().top
}, 2000);
});
$("#Button2").click(function () {
$('html, body').animate({
scrollTop: $("#Div2").offset().top
}, 2000);
});
$("#Button3").click(function () {
$('html, body').animate({
scrollTop: $("#Div3").offset().top
}, 2000);
});
});
</script>
When I get to the page, and click one of the buttons works fine, but when I need to click again it don't work.当我到达页面并单击其中一个按钮时可以正常工作，但是当我需要再次单击时它不起作用。
Any idea?任何的想法？
2 个解决方案
解决方案1
0 2016-04-04 15:30:09
It must have something to do with your HTML.它必须与您的 HTML 相关。 I put your code in the snippet below and it works.我将您的代码放在下面的代码段中，并且可以正常工作。
$(document).ready(function () { $("#Button1").click(function () { $('html, body').animate({ scrollTop: $("#Div1").offset().top }, 2000); }); $("#Button2").click(function () { $('html, body').animate({ scrollTop: $("#Div2").offset().top }, 2000); }); $("#Button3").click(function () { $('html, body').animate({ scrollTop: $("#Div3").offset().top }, 2000); }); }); .space { height: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="Button1">Button1</button> <button id="Button2">Button2</button> <button id="Button3">Button3</button> <div class="space"></div> <div id="Div1">Div1</div> <div class="space"></div> <div id="Div2">Div2</div> <div class="space"></div> <div id="Div3">Div3</div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
解决方案2
-2 2016-04-04 15:40:18
It looks okay from my end, I've created this jsfiddle for you.从我的角度来看，我已经为您创建了这个 jsfiddle。
I believe, the button is not working because you might be already at the same place you want to scroll to.我相信，该按钮不起作用，因为您可能已经在要滚动到的同一位置。
Code Snippet代码片段
$(document).ready(function() { $("#Button1").click(function() { $('html, body').animate({ scrollTop: $("#Div1").offset().top }, 2000); }); $("#Button2").click(function() { $('html, body').animate({ scrollTop: $("#Div2").offset().top }, 2000); }); $("#Button3").click(function() { $('html, body').animate({ scrollTop: $("#Div3").offset().top }, 2000); }); }); .container { height: 1000px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="Div1">1</div> <div id="Div2">2</div> <div id="Div3">3</div> <div class="container"> </div> <div id="Button1">click1</div> <div id="Button2">click2</div> <div id="Button3">click3</div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.