滾動到div不工作在jQuery

-1

在button click我想scroll到一個特定的div。最初，div是hidden。兩個事情發生在我的button click滾動到div不工作在jQuery

股利應可見（它的工作），並

滾動到這個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我認爲你正在嘗試不可能的事情:) –

你想點擊一個未呈現的按鈕（display：none）並滾動到該div（在其中你剛剛點擊過），只是一個問題：WTF？ – enguerranws

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

可以更改爲：

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

確保height:100%;或min-height:100%;未在樣式表中設置爲<html>和/或<body>元素。通常，這會阻止jQuery scrollTop動畫工作。

來源

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按鈕，滾動到div的，您可以根據需要調整您的按鈕。

來源

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

回答

相關問題