从页面内的同级元素滚动一个元素

发布于 2024-12-03 05:06:23 字数 378 浏览 0 评论 0原文

我必须从一个 iframe 中滚动另一个 iframe。滚动位置是标签的href 属性。我能够访问元素 #ftoc，其中包含我想要滚动的文档，这是位于同一域的 html 文件。

我有这段代码来进行滚动。

$('#cfrench', window.parent.parent.document).contents().find('#ftoc').contents().find('body').animate({scrollTop: $('a[href="'+text+'"]').offset().top-1},500);

.contents().find('body') 似乎有问题。滚动到该 href 的正确方法是什么？谢谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亽野灬性zι浪 2024-12-10 05:06:23

看看这个

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);

版本我无法检查代码，因为我不知道详细信息。

版本2.0 :)（工作解决方案）

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>

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>

回复收藏 0 原文

~没有更多了~