2

Web サイトで tumblr ブログを iframe しました。スクロールペインを使用しています。こちらをご覧くださいhttp://danmccarthy.net/news/

私の問題は、ブログのボタンのページネーションがiframeを次のページにリロードすることですが、実装されたスクロールペインでiframeがリロードされると、親ページの上部にスクロールする方法を理解できません。

私は成功せずに次のことを試しました

iframe onload="window.parent.parent.scrollTo(0,0)"

と

$('#exhibit iframe').load(function(){
     $(window).scrollTop(0);
});

以下は、全身スクロール用のスクロール区画スクリプトです。

$(function()
{
var win = $(window);
var isResizing = false;
win.bind(
    'resize',
    function()
    {
        if (!isResizing) {
            isResizing = true;
            var container = $('#exhibit');
            container.css(
                {
                    'width': 1,
                    'height': 1
                }
            );
            container.css(
                {
                    'width': win.width(),
                    'height': win.height()
                }
            );
            isResizing = false;
            container.jScrollPane(
                {
                    autoReinitialise: true,
                }
            );
        }
    }
).trigger('resize');
$('body').css('overflow', 'hidden');
if ($('#exhibit').width() != win.width()) {
    win.trigger('resize');
}
});

そしてそれがHTMLです

<div id="wrapper">
<div id="wrap-top">

   <!-- Header and Menu -->

</div>

<div id='exhibit'>
    <div class='container'>
        <div class='right'>

            <!-- iframe -->

        </div>
    </div>
</div>

</div>
4

1 に答える 1

1

これが私がテストのために持っていたものです。あなたの質問を正しく理解していれば、これはあなたが探しているもののようなものです:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>

<div id="divTest">
    <h1>First Heading</h1>
    <h1>Second Heading</h1>
    <h1>Third Heading</h1>
    <h1>Fourth Heading</h1>
    <h1>Fifth Heading</h1>
    <h1>Sixth Heading</h1>
    <h1>Seventh Heading</h1>
    <h1>Eigth Heading</h1>
    <h1>Ninth Heading</h1>
    <h1>Tenth Heading</h1>
    <h1>Eleventh Heading</h1>
    <h1>Twelth Heading</h1>
    <h1>Thirteenth Heading</h1>
</div>

<iframe id="frmTestFrame" height="500px" width="800px" src="http://www.reddit.com"></iframe>

<script type='text/javascript'>
    var self = this;

    $(document).on('ready', function() {
        $("#frmTestFrame").on('load', function() {
            self.scrollTo(0,0); 
        });
    });

</script>
</body>
</html>

これがお役に立てば幸いです。

于 2013-06-21T05:15:45.247 に答える