1

我正在使用 jQuery 构建智能手机应用程序 (iOS)。我有 2 个 div，一个显示事件列表，另一个显示一个事件。这是他们的样子：

<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

第二次编辑：函数内部的 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();.

注意：您可能希望将滚动部分移动到and之后。show()hide()

于 2012-10-08T10:03:28.853 回答
1

我的猜测是在第一个 div 真正隐藏并且第二个 div 真正可见之前执行滚动。尝试这个：

function showSingle(itemId){
    $('#output').hide();
    $('#single').show(0, function(){
        $(document).scrollTop(0);
        /* ajax */
    });
}
于 2012-10-08T10:30:15.507 回答
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 回答