Question

大家好我有一个脚本，当点击div时，它会向下滚动到另一个部分。然后，当单击按钮时，它会滚动回到顶部。

它在Firefox中运行 - 但不在Chrome中。我已经在StackOverflow上尝试了每个版本的代码，我无法让它工作。

<script type="text/javascript">
$(document).ready(function(){
    $("#button").click(function(){
        var offset = 20; //Offset of 20px
        $("#offer_table").toggle();

        $('html, body').animate({
        scrollTop: $("#section5").offset().top + offset
    }, 2000);

    });
    });     

</script>

有人可以帮忙吗？

Answer 1

我会尝试将此$("#section5").offset().top + offset放入变量并在动画定义中使用该变量，例如：

...
var x1 = $("#section5").offset().top + offset;
$('html, body').animate({
        scrollTop: x1
    }, 2000);
...

Answer 2

您发布的脚本有效（在Chrome中测试过），但它无法满足您的要求。在您的脚本中，当您单击按钮时，页面将滚动到＃section5，#offer_table按钮切换显示/隐藏。你究竟想要它做什么？您提到了这些部分 - 当您单击当前部分时，是否希望页面向下滚动到下一部分？

$(document).ready(function(){
    $("#button").click(function(){
        var offset = 20; //Offset of 20px
        $("#offer_table").toggle();

        $('html, body').animate({
        scrollTop: $("#section5").offset().top + offset
    }, 2000);

    });
});

div {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="offer_table">Offer</button>
<button id="button">Button</button> 
<div id="section1">section 1</div>
<div id="section2">section 2</div>
<div id="section3">section 3</div>
<div id="section4">section 4</div>
<div id="section5">section 5</div>

ScrollTop - 运行Firefox，而不是Chrome

2 个答案: