Question

我有这部分代码

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

当我到达页面，然后单击其中一个按钮工作正常，但当我需要再次单击它时，它不起作用。

有什么想法吗？

Answer 1

它必须与您的HTML有关。我将您的代码放在下面的代码段中并且有效。

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

Answer 2

从我的结果看起来没问题，我已经为你创造了这个jsfiddle。

我相信，该按钮无效，因为您可能已经在想要滚动到的同一个位置。

jsfiddle

代码段

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

JavaScript不会在第二次单击时滚动

2 个答案: