admin管理员组文章数量:1026989
I'm trying to make my browser window scroll down to the top of a div when clicked. The only problem is everything else works but that, the window should scroll down to the top of the div clicked...
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... /
I'm trying to make my browser window scroll down to the top of a div when clicked. The only problem is everything else works but that, the window should scroll down to the top of the div clicked...
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/Jq4Vw/
Share Improve this question edited May 8, 2015 at 16:42 Pixelomo 6,7374 gold badges48 silver badges62 bronze badges asked Jan 8, 2013 at 11:29 LiamLiam 9,85540 gold badges114 silver badges214 bronze badges 4- 2 What are you expecting to happen with $(window).scrollTop? – Alex Gill Commented Jan 8, 2013 at 11:32
- animating same element two times???????? – Jai Commented Jan 8, 2013 at 11:35
-
@Alex
$(window).scrollTop()– Talha Akbar Commented Jan 8, 2013 at 11:53 - 1 loooooooolllllllllllllllll – Alex Gill Commented Jan 8, 2013 at 11:54
5 Answers
Reset to default 8This is how you scroll to the top of the div as long as the window isn't maxed out:
$('.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
I think you are trying to achieve this: http://jsfiddle/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
});
});
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/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 });
});
});
$('.work-showcase').click(function(){
window.location = "#top";
});
make sure top ID is present.
<div id="top">
I am at the top of the document.
</div>
Working Fiddle
I'm trying to make my browser window scroll down to the top of a div when clicked. The only problem is everything else works but that, the window should scroll down to the top of the div clicked...
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... /
I'm trying to make my browser window scroll down to the top of a div when clicked. The only problem is everything else works but that, the window should scroll down to the top of the div clicked...
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/Jq4Vw/
Share Improve this question edited May 8, 2015 at 16:42 Pixelomo 6,7374 gold badges48 silver badges62 bronze badges asked Jan 8, 2013 at 11:29 LiamLiam 9,85540 gold badges114 silver badges214 bronze badges 4- 2 What are you expecting to happen with $(window).scrollTop? – Alex Gill Commented Jan 8, 2013 at 11:32
- animating same element two times???????? – Jai Commented Jan 8, 2013 at 11:35
-
@Alex
$(window).scrollTop()– Talha Akbar Commented Jan 8, 2013 at 11:53 - 1 loooooooolllllllllllllllll – Alex Gill Commented Jan 8, 2013 at 11:54
5 Answers
Reset to default 8This is how you scroll to the top of the div as long as the window isn't maxed out:
$('.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
I think you are trying to achieve this: http://jsfiddle/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
});
});
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/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 });
});
});
$('.work-showcase').click(function(){
window.location = "#top";
});
make sure top ID is present.
<div id="top">
I am at the top of the document.
</div>
Working Fiddle
本文标签： JavaScriptJQueryon click scroll window down to top of the divStack Overflow
版权声明：本文标题：javascript - jQuery, on click scroll window down to top of the div - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1740246269a1737883.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论