jQuery,点击滚动窗口到div的顶部

时间:2013-01-08 11:29:16

标签: javascript jquery

我正在尝试让我的浏览器窗口在点击时向下滚动到div的顶部。唯一的问题是其他一切工作但是,窗口应向下滚动到div点击的顶部...

到目前为止,我有:

$('.work-showcase').click(function(){
    $('.work-showcase').animate({height:'135px'}, 500);
    $(this).animate({height:'400px'}, 500);
    $(window).scrollTop;
});

我做了一个jsfiddle来告诉你我的意思...... http://jsfiddle.net/Jq4Vw/

5 个答案:

答案 0 :(得分:8)

只要窗口没有最大化,就可以滚动到div的顶部:

$('.work-showcase').click(function(){

    $('html,body').animate({
        scrollTop: $(this).offset().top},
        'slow');
});

我不确定你在滚动之前想要实现的目标

在此处查看jsFiddle

答案 1 :(得分:1)

试试这个:

$('.work-showcase').click(function(){
    $('.work-showcase').animate({height:'135px'}, 500);
    $(this).animate({height:'400px'}, 500);
    $("html, body").animate({ scrollTop: $(this).offset().top }, 500);
});

答案 2 :(得分:1)

请参阅:http://jsfiddle.net/Jq4Vw/4/

$('.work-showcase').click(function(){
   $('.work-showcase').animate({height:'135px'}, 500);
  $(this).animate({height:'400px'}, 500,function() {  
  $("html, body").animate({ scrollTop: $(this).offset().top });  
   });
 });

答案 3 :(得分:1)

我认为你正在努力实现这一目标:http://jsfiddle.net/Jq4Vw/7/

$('.work-showcase').click(function(){
   $('.work-showcase').animate({height:'135px'}, 500);
   $(this).animate({height:'400px'}, 500).promise().done(function(){
       $('html,body').animate({scrollTop: $(this).offset().top},500);
       $(this).addClass('current').unbind('click'); // just add this line
   });
});

答案 4 :(得分:0)

$('.work-showcase').click(function(){
    window.location = "#top";
});

确保顶级ID存在。

<div id="top">
I am at the top of the document.
</div>

Working Fiddle