Прокрутите до div, не работает в jQuery

-1

На button click Я хочу scroll к определенному div. Первоначально div является hidden .Two вещи происходят на мой button clickПрокрутите до div, не работает в jQuery

The DIV должен видны (он работает) и

Выделите этот DIV (не работает)

Мой код:

HTML

<input type="button" id="showbtn" value='Show'> 
<div id="ref_div" style="display:none;"> 
<span class="small">Reference Number</span> 
<input type="text" name="rnum" id="rnum" class="form-control form-control-solid placeholder-no-fix" placeholder="Reference Number" title="Reference Number"><br> 
<input type="button" class="btn btn-success" id="ref_btn" name="ref_btn" value="Proceed"><br> 
</div>

JQuery

$("#showbtn").click(function() { $("#ref_div").css('display', 'block'); }); $("#ref_btn").click(function() { $('html, body').animate({ scrollTop: $("#ref_div").offset().top }, 2000); });

источник

2015-12-17 next2u

действительно? 'display: none;'? – Dray

@ next2u Я думаю, что вы пытаетесь сделать невозможную вещь :) –

Вы хотите нажать кнопку, которая не отображается (отображение: нет), и прокрутите до этого div (в котором вы только что нажали), просто вопрос: WTF? – enguerranws

$("#ref_div").css('display','block');

Может измениться на:

$("#ref_div").show();

Убедитесь, что height:100%; или min-height:100%; не указан в таблицах стилей на <html> и/или <body> элементах. Обычно это предотвращает работу анимации scrollTop jQuery.

источник

2015-12-17 13:30:23 rorymorris89

$('document').ready(function() { 
 
$('body').css('height','600px') 
 
$("#ref_btn").click(function(){ 
 
    $("#ref_div").toggle() 
 
    $('html, body').animate({ 
 
    scrollTop: $("#ref_div").offset().top 
 
     }, 1000); 
 
    }); 
 
})

#ref_div{ 
 
    width:30%; 
 
    height:10%; 
 
    background:green; 
 
    display: none; 
 
    
 
} 
 

 
input#ref_btn 
 
{ 
 
    position: absolute; 
 
    bottom: -187px; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
</head> 
 
<div id="ref_div"> 
 
<span class="small">Reference Number</span> 
 
<input type="text" name="rnum" id="rnum" class="form-control form-control-solid placeholder-no-fix" placeholder="Reference Number" title="Reference Number"><br> 
 
</div> 
 
<input type="button" class="btn btn-success" id="ref_btn" name="ref_btn" value="Proceed"><br> 
 
</html>

Попробуйте это и идти вниз и нажмите кнопку procced, чтобы перейти к Див, вы можете настроить кнопки по мере необходимости.

источник

2015-12-17 13:53:55 Sravan

Я не слишком уверен, как вы пытаетесь достичь этого, но это то, что я хотел бы сделать:

$('a[href^="#"]').on('click',function(e){//event is important 
    e.preventDefault();//preventing default action 
    $(this.hash).show();//shows your target element 
    $('html,body').animate({ 
     scrollTop:$(this.hash).offset().top 
    },500); 
});

Затем вы должны будете держать оба элемента разделите говорят как

<a href='#show_element'>Show Element!</a> 
<div id='show_element'> 
    <h1>I have been shown!</h1> 
</div>

источник

2015-12-17 14:06:20 sourRaspberri

Прокрутите до div, не работает в jQuery

ответ

Смежные вопросы