Как добавить функцию прокрутки вверх в slideDown одним кликом?

Question

Как добавить функцию прокрутки вверх в slideDown одним кликом?

0

У меня есть рабочая функция slideDown, которую я использую для отображения 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>

Stefan Weiss 16 дек. 2013, в 18:06

Источник

0

Просто добавьте его в функцию щелчка.
isherwood 16 дек. 2013, в 16:31

Теги:

javascript

jquery

2 ответа

1

Получите верхнее значение смещения 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>

Commodore Timo 16 дек. 2013, в 14:14

Ещё вопросы

Просто добавьте его в функцию щелчка.

FiLeVeR10 · Accepted Answer · 2013-12-16T15-11-00.000Z

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/

Спасибо за ваши усилия, я ценю это! Ваш пример работает, но когда я копирую / пропускаю его, функция «скрыть» с # banner_step_3 не работает правильно, так как эта «статья» не скрыта. Есть идеи, как это исправить?
Либо сохраняйте свою линию hide в начале, как я делал в скрипке, либо display:none в CSS.