Scrolling one element from a sibling element within a page
From within an iframe I must scroll another. The scrolling location is the href attribute of an tag. I am able to get to the element #ftoc which contains the document开发者_开发问答 that I want to scroll, an html file located on the same domain.
I have this code to do the scrolling.
$('#cfrench', window.parent.parent.document).contents().find('#ftoc').contents().find('body').animate({scrollTop: $('a[href="'+text+'"]').offset().top-1},500);
There seems to be a problem with .contents().find('body'). What is the right way of scrolling to that href? Thanks.
Take a look on this version
var elementClicked = $('a[href="' + text + '"]');
var destination = $(elementClicked).offset().top;
var $frame = $('#cfrench', window.parent.parent.document).contents().find('#ftoc').contents();
$frame.find("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 20 }, 500);
p.s. I wasn't able to check the code because I don't the details.
version 2.0 :) (working solution)
main.html
<iframe id="frame1" src="page-1.htm"></iframe>
<iframe id="frame2" src="page-2.htm"></iframe>
page-1.html
<head>
<title></title>
<style type="text/css">
#anchor { margin-top:400px; display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#scroller').click(function () {
var $frame = $(window.parent.document).find('#frame2').contents();
var $anchor = $frame.find('#anchor');
var destination = $anchor.offset().top;
console.log(destination);
$frame.find("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 20 }, 500);
return false;
});
});
</script>
</head>
<body>
Page 1
<a id="scroller" href="#">Scroll iframe</a>
</body>
page-2.html
<head>
<style type="text/css">
#anchor { margin:400px 0; display:block; }
</style>
</head>
<body>
Page 2
<a id="anchor" href="anhor.html">Anchor</a>
</body>
加载中,请稍侯......
精彩评论