【问题标题】:Reload page in same position在相同位置重新加载页面
【发布时间】:2011-05-15 21:59:49
【问题描述】:

嗨 我想知道是否有一种简单的方法可以在重新加载页面时将其滚动到之前的位置。 例如,我的页面中间有一个公告板。公告是分页的,用户可以单击下一步查看下一批公告。页面重新加载时的问题是跳转到页面顶部的正常行为。 页面重新加载到相同位置的一个很好的示例是使用 F5 重新加载页面时。

我知道很难做到这一点。

分页链接是这样的

 index.php?page_num=2&page_scroll=200;

当页面加载时运行一个脚本,该脚本从 url 中拉出页面滚动并设置

document.body.ScrollTop==200px.

当然可以访问最后一页的 dom 并在重定向之前获取它的位置。按 F5 时浏览器是怎么做的?

【问题讨论】:

    标签: javascript php dom


    【解决方案1】:

    您可以使用 html 锚点滚动到页面的一部分:

    index.php?page_num=2#YOURID
    

    或者使用你的 js 设置它。 location.hash

    【讨论】:

    【解决方案2】:

    您提到的硬方法可能是唯一的方法,因为从浏览器的角度来看,它正在加载一个全新的页面。

    不过,另一种解决方法是通过 XHR 加载下一页公告,然后替换公告所在 div 的当前内容。这将使来回分页为您提供无缝体验用户,因为他们不必等待整个页面加载和呈现。根据具体情况,这可能是也可能不是一个好的选择,但值得考虑。

    【讨论】:

    • 好点 ajax 可能是这种情况下的解决方案,你是对的,它会让体验更加用户友好。
    【解决方案3】:

    我从http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser 获取代码并使用它将滚动设置到页面重新加载时的最后一个位置。

    <script type="text/javascript">
    <!--
    /////////////////////////////////////////////////////////
    //get scroll position
    var get_scroll = function(){
    var x = 0, y = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        y = window.pageYOffset;
        x = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        y = document.body.scrollTop;
        x = document.body.scrollLeft;
    } else if( document.documentElement && 
    ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        y = document.documentElement.scrollTop;
        x = document.documentElement.scrollLeft;
    }
    var obj = new Object();
    obj.x = x;
    obj.y = y;
    return obj;
    };
    //////////////////////////////////
    function saveScroll(){
    var scroll = get_scroll(); 
    document.getElementById("x").value = scroll.x;
    document.getElementById("y").value = scroll.y;
    }
    //////////////////////////////////////////////
    ////////This runs at <body onload = "setScroll()" >///////////////////////////
    function setScroll(){
    var x = "<?php echo $_POST['x']; ?>";
    var y = "<?php echo $_POST['y']; ?>";
    
    if(typeof x != 'undefined')
    window.scrollTo(x, y);
    }
    ////////////////////////////////////////////////////////////////
    -->
    </script>
    
    <body onload = "setScroll()">
    
    <!--Post variables to save x & y -->
    
    <input name="x" id="x" type="hidden" value="" />
    <input name="y" id="y" type="hidden" value="" />
    </body>
    

    然后使用诸如 onclick="saveScroll()" 之类的事件或保存滚动值。提交后观看魔术发生! :)

    检索滚动位置的函数取自:http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-08-12
      • 2021-07-10
      • 1970-01-01
      • 2017-11-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多