admin管理员组文章数量:1332200
I have a modal window and need to be able to open the modal and then scroll the user to a specific spot in the modal.
I am getting the modal contents with AJAX to a PHP script.
eg mypage.php?loc=someid
In the PHP script I have this JS to do the scrolling:
$( document ).ready(function() {
$('.modal-body').animate({
scrollTop: $("#<?php echo $_GET['loc'];?>").offset().top
}, 1000);
});
in the PHP page is some HTML like this:
<div id="someid"></div>
My content loads correctly but the amount of scroll that happens appears to be relative to the link that opened the modal so it does not actually find the div in the doc.
I am guessing my JS needs a little tweaking.
It seems I need to be able to calculate the offset of the element from the top of the modal content.
I can fake this by setting the value against the element I am scrolling to like this. But I really need a programmatic way of calculating this. Obviously different devices will not work correctly as shown.
$( document ).ready(function() {
$('.modal-body').animate({
scrollTop: $("#<?php echo $_GET['loc'];?>").attr('distance')
}, 1000);
});
//Trying to find out how far this div is from the top of the modal window?
<div id="someid" distance="670"></div>
I have a modal window and need to be able to open the modal and then scroll the user to a specific spot in the modal.
I am getting the modal contents with AJAX to a PHP script.
eg mypage.php?loc=someid
In the PHP script I have this JS to do the scrolling:
$( document ).ready(function() {
$('.modal-body').animate({
scrollTop: $("#<?php echo $_GET['loc'];?>").offset().top
}, 1000);
});
in the PHP page is some HTML like this:
<div id="someid"></div>
My content loads correctly but the amount of scroll that happens appears to be relative to the link that opened the modal so it does not actually find the div in the doc.
I am guessing my JS needs a little tweaking.
It seems I need to be able to calculate the offset of the element from the top of the modal content.
I can fake this by setting the value against the element I am scrolling to like this. But I really need a programmatic way of calculating this. Obviously different devices will not work correctly as shown.
$( document ).ready(function() {
$('.modal-body').animate({
scrollTop: $("#<?php echo $_GET['loc'];?>").attr('distance')
}, 1000);
});
//Trying to find out how far this div is from the top of the modal window?
<div id="someid" distance="670"></div>
Share
Improve this question
edited Jul 31, 2019 at 22:22
brasofilo
26.1k15 gold badges93 silver badges186 bronze badges
asked Mar 7, 2014 at 21:28
BobBBobB
7721 gold badge9 silver badges25 bronze badges
0
2 Answers
Reset to default 3User found solution but doesn't appear to have added it, so for the sake of pleteness, here it is
$( document ).ready(function() {
setTimeout(function() {
var $el = $("#<?php echo $_GET['loc'];?>")
var elpos = $el.position();
$('.modal-body').animate({
scrollTop: elpos.top
}, 1000);
},500);
});
The solution found by the OP and reposted by Rob Quincey works well, HOWEVER do remember that position give you the position relative to the element's parent element.
If the element is a bare <div>
it is not problem, but if the grandparent element has some margin or padding properties, then the position of the parent element will be pushed down the page. Which means that the position of this element will also be pushed down. So to the the scrolling to work properly, you need to add the position of the parent element viz:
$( document ).ready(function() {
setTimeout(function() {
var $el = $("#<?php echo $_GET['loc'];?>")
var elpos = $el.position();
var elparentpos = $el.parent().position();
$('.modal-body').animate({
scrollTop: elpos.top + elparentpos.top;
}, 1000);
},500);
});
And then, if necessary, work your way up the DOM tree until you get to the top element which would normally be your modal div. But you only need to address elements which have some top end margin or padding.
本文标签: javascriptScroll to element inside modal windowStack Overflow
版权声明:本文标题:javascript - Scroll to element inside modal window - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742247883a2440196.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论