Как показать div, когда нажата кнопка, а затем прокручена до нее?
Есть ли способ показать div при нажатии кнопки, а затем прокрутить до него? Я использую следующий код. Он показывает div, но мне нужно снова нажать кнопку, чтобы перейти к div. Есть ли способ заставить кнопку щелкнуть дважды?
$(document).ready(function(){
$("div#home-btn-1").on('click', function () {
$('div.hide-section-mobile').addClass("show");
$('#home-btn-1').scrollTo('#funnel-1-mobile');
});
});
Я не знаю, почему мой ответ был отклонен, но вот рабочий пример с использованием location.hashjsfiddle.net/43Ls1tnd/7
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Используйте location.hash = "elementID";
Заменить $('#home-btn-1').scrollTo('#funnel-1-mobile');
С location.hash = 'funnel-1-mobile';
Вот пример: http://jsfiddle.net/43Ls1tnd/7/
Почему мой ответ отвергнут, хотя он работает?
К сожалению, он не работает на мобильных устройствах: / Он показывает div при первом щелчке, но не прокручивается до него, пока я не нажму на него еще раз. Это сайт maritimeinjuryfirm.com/test445-copy. Когда я нажимаю «Получить дополнительную информацию», мне нужно, чтобы он открывал следующий div на мобильном устройстве, что он делает, а затем прокручиваю до него.
Есть ли способ заставить кнопку щелкнуть дважды?
Он делает и то, и другое, когда кнопка нажимается один раз. Вы пробовали мой код и мой пример выше?
Во-первых, есть привязка, которая прокручивается к элементу, поэтому вы можете удалить часть прокрутки или привязку.
Если вы хотите щелкнуть его дважды, используйте это, и он будет нажат снова после того, как вы щелкните его один раз, $(document).ready(function(){ $("div#home-btn-1").on('click', function () { $('div.hide-section-mobile').addClass("show"); $('#home-btn-1').scrollTo('#funnel-1-mobile'); $('div#home-btn-1').click(); }); });
Просто расширьте свою логику в событии щелчка при проверке, чтобы увидеть, раскрыт ли класс. Если прокрутить до него, я изменил свой код, чтобы он работал в приведенном ниже примере:
$("#home-btn").on('click', function() {
$('#funnel-1-mobile').hasClass("show") ? console.info('Adding') : $('#funnel-1-mobile').addClass("show");
$(window).scrollTop(1500);
});div {
background-color: lime;
width: 500px;
height: 100px;
margin: 10px;
}
#funnel-1-mobile {
background-color: indigo;
color: white;
display: none;
}
.show {
display: block !important;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='home-btn'>Click to scroll</button>
<div></div>
<div></div>
<div></div>
<div id='funnel-1-mobile'>I scrolled!</div>Я пробовал это, но, как и раньше, на мобильном телефоне он только показывает, он не прокручивается до него, пока я не нажму второй раз на той же кнопке. Это сайт maritimeinjuryfirm.com/test445-copy. Когда я нажимаю «Получить дополнительную информацию», мне нужно покажите следующий div на мобильном устройстве, что он и делает, а затем прокрутите до него.
О, я вижу, вы хотите сделать и то, и другое одним щелчком. Я неправильно понял ваш вопрос
Есть ли способ заставить кнопку щелкнуть дважды?
Хм, вы могли бы просто использовать trigger('click') в другом случае. Таким образом, когда вы щелкаете по нему, когда он добавляет класс, и сразу вызывает себя, запуская прокрутку
Смотрите мой обновленный ответ
@DayanCabrera только что продолжил, помогло ли вам это вообще? Или у вас все еще есть проблемы?
Я собираюсь попробовать прямо сейчас. Я сообщу вам результат в ближайшее время. Большое спасибо за помощь :)
Это сработало для меня. Спасибо!
Попробуй это
$(document).ready(function(){
$("div#home-btn-1").on('click', function () {
$('div.hide-section-mobile').addClass("show").scrollIntoView();
});
});