1

jQueryを使用してスマートフォンアプリ（iOS）を構築しています。2つのdivがあり、1つはイベントのリストを表示し、もう1つは1つのイベントのみを表示します。これは彼らがどのように見えるかです：

<div id="output">

            </div>
<div id="single" style="background-color: red;">

</div>

最初のシングルはdocument.readyに隠されています。

ページを下にスクロールしてイベントをクリックすると、＃singleが表示され、＃outputが非表示になります。ここで問題となるのは、新しいページのように一番上に移動するのではなく、x + y値の現在のページの「場所」を保持しているため、ページは空白で表示されますが、コンテンツはページビューから外れています（およびスクロールできません）。これは私がドキュメントを一番上に持って来ようとした方法です：

function showSingle(itemId){

                $('#output').hide();
                $('#single').show();
    $("#single").scrollTop(0);
/* ajax */
}

しかし、これはトップになりません、私は間違いを犯しましたか？ありがとう

編集：

これはクリックする前です：imgur.com/Mitlpそしてこれはクリックした後です：imgur.com/873pO

次のようになります：http：//imgur.com/nPGU8

2番目の編集：関数内のAJAX

$.ajax({
                        url: 'http://dev.24323423.co.uk/getSingle.php',
                        dataType: 'jsonp',
                        data: { dbId: itemId },
                        jsonp: 'jsoncallbackSingle',
                        timeout: 8000,
                        success: function(data, status){
                            $.each(data, function(i,item){ 
                                var linkedPageSingle = '<p><a href="#" onClick="homePage(1)">Back</a></p><h2>'+item.eventName+'</h2>'
                                    + '<p>Description: '+item.description+'</p><p>Type: '
                                    + item.type+'</p><p id="pageid">'+item.id+'</p>';

                                $('#single').append(linkedPageSingle);
                            });
                        },

                        error: function(){
                            $('#single').text('There was an error loading the data.');
                        }

                    });
4

3 に答える 3

3

window.scrollTo(0, 0);の代わりに、またはを使用$(document).scrollTop(0);してドキュメントを一番上までスクロールします$("#single").scrollTop(0);。

.scrollTop()ドキュメントに対してではなく、選択した要素の上部スクロールオフセット値を設定します。

ページをスクロールして#single（一番上までではなく）表示されるようにする場合は、を使用します$("#single")[0].scrollIntoView();。

注：スクロール部分をとの後に移動することをお勧めします。show()hide()

于 2012-10-08T10:03:28.853 に答える
1

まず、助けてくれた人たちに感謝します。しかし、私が持っていた問題を解決しようとするのではなく、それを回避する方法を見つけました。これは私が使用したものです：

 var linkedPage = '<h2><a href="#" onClick="takeToSingle('+item.id+')">'+item.eventName+'</a></h2>'
                            + '<p>Date: '+item.date+'</p><p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

                        output.append(linkedPage);

 function takeToSingle(itemId){
                localStorage.setItem("pageID",itemId);
                document.location.href = 'page1.html';
            }

これにより、ローカルストレージアイテムが設定され、page1.htmlに送信されて取得されます。

 pageId = localStorage.getItem("pageID");
于 2012-10-08T11:51:00.310 に答える
1

私の推測では、最初のdivが実際に非表示になり、2番目のdivが実際に表示される前に、スクロールが実行されています。これを試して：

function showSingle(itemId){
    $('#output').hide();
    $('#single').show(0, function(){
        $(document).scrollTop(0);
        /* ajax */
    });
}
于 2012-10-08T10:30:15.507 に答える