[英]jQuery, on click scroll window down to top of the div
I'm trying to make my browser window scroll down to the top of a div when clicked. 我试图使我的浏览器窗口在单击时向下滚动到div的顶部。 The only problem is everything else works but that, the window should scroll down to the top of the div clicked...
唯一的问题是其他所有东西都可以正常工作,但是,该窗口应该向下滚动到所单击的div的顶部...
So far I have: 到目前为止,我有:
$('.work-showcase').click(function(){
$('.work-showcase').animate({height:'135px'}, 500);
$(this).animate({height:'400px'}, 500);
$(window).scrollTop;
});
I've made a jsfiddle to show you what I mean... http://jsfiddle.net/Jq4Vw/ 我做了一个jsfiddle,向您展示我的意思... http://jsfiddle.net/Jq4Vw/
This is how you scroll to the top of the div as long as the window isn't maxed out: 只要窗口没有最大化,这就是滚动到div顶部的方式:
$('.work-showcase').click(function(){
$('html,body').animate({
scrollTop: $(this).offset().top},
'slow');
});
I am unsure what you were trying to achieve before scrolling 我不确定滚动之前您要达到的目标
See it here jsFiddle 在这里看到jsFiddle
Try this: 尝试这个:
$('.work-showcase').click(function(){
$('.work-showcase').animate({height:'135px'}, 500);
$(this).animate({height:'400px'}, 500);
$("html, body").animate({ scrollTop: $(this).offset().top }, 500);
});
See this: http://jsfiddle.net/Jq4Vw/4/ 看到这个: 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 });
});
});
I think you are trying to achieve this: http://jsfiddle.net/Jq4Vw/7/ 我认为您正在尝试实现这一目标: 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
});
});
$('.work-showcase').click(function(){
window.location = "#top";
});
make sure top ID is present. 确保存在顶部ID。
<div id="top">
I am at the top of the document.
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.