如何添加向上滚动功能滑动1点击？

我有一个工作的slideDown函数，我用它来显示div，一旦用户点击了按钮。如何添加向上滚动功能滑动1点击？

该div是相当高度，它会给一个更好的概述，如果我能够将它们滚动到页面的顶部。我如何激活并向现有的slideDown函数添加一个向上滚动功能，只需点击一下即可同时运行？

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>

来源

2013-12-16 Teo

只需将其添加到您的点击功能。 – isherwood

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/

来源

2013-12-16 16:37:00 FiLeVeR10

谢谢你的努力，我很感激！你的例子有效，但是当我复制/过去它时，＃banner_step_3的'hide'函数没有缝合，因为'article'没有隐藏。任何想法如何解决这个问题？ – Teo

或者像我在小提琴时那样在开始时保持你的'hide'行，或者在css中给它显示：none。 – FiLeVeR10

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

来源

2013-12-16 16:32:36

如何添加向上滚动功能滑动1点击？

回答

相关问题