如何在幻灯片中添加向上滚动功能单击1次即可向下滚动

How to add scroll up function to slideDown with 1 click?

本文关键字：滚动 功能 单击 1次 幻灯片 添加      更新时间：2023-09-26

我有一个可用的slideDown函数，当用户单击按钮时，我用它来显示div。

div很高，如果我能把它们滚动到页面顶部，它会提供更好的概述。如何激活向上滚动功能并将其添加到现有的幻灯片向下功能中，只需单击一下即可同时工作？

jQuery

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

jquery

$("#banner_step_3").hide();
$("#next_btn_show_step_3 a").on('click', function(e) {//on link click
    var ts = $(this).attr('href');//get element
    $(ts).slideDown(500);//slide down
    $('html, body').animate({ scrollTop: $(ts).offset().top }, 500);//scrollto element
    e.preventDefault();//prevent default
});

html

<div class="next_btn" id="next_btn_show_step_3">
    <!-- added id as href -->
    <a href="#banner_step_3">next</a>
</div>
<article class="order_form_step_3" id="banner_step_3">hey yo</article>

如果你发布一个工作示例，这会变得容易得多。

制作小提琴：http://jsfiddle.net/filever10/6ZcjK/

获取div的偏移顶部值并使用jQuery.scrollTop（）

<script>
    $(document).ready(function(){
        $("#banner_step_3").hide();
        $("#next_btn_show_step_3").click(function(e){
            $("#banner_step_3").slideDown(500, function(){
                var offsetTop = $('#banner_step_3').offset().top;
                $("html").scrollTop(offsetTop);
            });
            e.preventDefault();
        });
    });
</script>
相关文章：