滚动到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

回答

相关问题