Question

我有几个jQuery slideDown函数，用户在点击Divs后会显示button。

问题是，点击按钮后，页面scroll up会显示在顶部，而Divs将不再可见。我想做的是阻止页面滚动。我该如何解决这个问题？

的jQuery

<script>
$(document).ready(function(){
     $("#banner_step_3").hide();
$("#next_btn_show_step_3").click(function(){
    $("#banner_step_3").slideDown(500);
  });
    });
</script>

HTML

<div class="next_btn" id="next_btn_show_step_3">
    <a href="#"><?php echo $lang ['next']; ?></a>
</div>
<article class="order_form_step_3" id="banner_step_3">
</article>

Answer 1

浏览器只是关注链接。

使用preventDefault()或return false停止继续使用默认行为。

<script>
$(document).ready(function(){
     $("#banner_step_3").hide();
$("#next_btn_show_step_3").click(function(e){
    $("#banner_step_3").slideDown(500);
    e.preventDefault();
  });
    });
</script>

Answer 2

取代：

<a href="#"><?php echo $lang ['next']; ?></a>

使用：

<a href="javascript:void(0)"><?php echo $lang ['next']; ?></a>

当您使用<a>创建href="#"标记时，它将始终重定向到页面顶部，因为浏览器实际上正在浏览您提供的href。

或者，您可以在 javascript函数中阻止此操作（跳转到顶部）。进行以下更改：

$("#next_btn_show_step_3").click(function(e){
    e.preventDefault();
    $("#banner_step_3").slideDown(500);
});

希望有所帮助。

为什么页面在每次slideDown后向上滚动以及如何防止这种情况？

2 个答案: