单击加载div后滚动到页面顶部

Question

我对jquery，ajax很新，并坚持这一点 -

我有一个div，当一个href＆＃34; link1＆＃34;点击。 我希望页面滚动到顶部/使用animate来点击特定的div。

这是我的代码 -

$(document).ready(function(){
  $('a[href="#link1"]').click(function(){
    $("#position").load("url/test.php #replace");
        return false;}).scrollTop();
});

Answer 1

Check The Demo

在此演示中，当您单击绿色/蓝色的div时，将加载来自外部链接的数据并使用特定的Id =＆＃34; specialContent＆＃34;之后它会滚动到加载

的div

HTML

<div id="Container">
<div id="ChildTOP">

</div>     
<div id="ChildLEFT">

</div>     

</div>   

Jquery的

$('#ChildLEFT').on('click',function(){
var lenContainer = $('#Container').offset();
    var lenDiv = $('#ChildLEFT').offset();

$('#ChildLEFT').load('http://fiddle.jshell.net/webdevem/JfcJp/show/ #specialContent');
$(window).scrollTop(lenDiv.top);

});


$('#ChildTOP').on('click',function(){
var lenContainer = $('#Container').offset();
    var lenDiv = $('#ChildTOP').offset();

$('#ChildTOP').load('http://fiddle.jshell.net/webdevem/JfcJp/show/ #specialContent');
$(window).scrollTop(lenDiv.top);

});

CSS

#Container{

    height:1000px;
    width:100%;
    background-color:orange;
}
#ChildTOP{

    height:480px;
    width:97%;
    background-color:#1C8B98;
    margin:10px;
    float:left;

}
#ChildLEFT{

    height:480px;
    width:97%;
    background-color:#1C8B98;
    margin:10px;
    float:left;

}