70

誰かが私が間違っていることを教えてもらえますか? 一定時間後にページを更新する必要がありますが、ページの上部に更新されます。ページの場所を変更しないようにする必要があります!だから、これは私が今働いていないメタタグですか? ここに私が持っていないものがありますが、まだ更新されていません。何か間違ったことをしているに違いありませんか?

こちらがもともと持っていたもの...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="refresh" content="72">
        <meta http-equiv="Pragma" CONTENT="no-cache">
        <meta http-equiv="Expires" CONTENT="-1">

        <style type="text/css">
        body
        { 
            background-image: url('../Images/Black-BackGround.gif');
            background-repeat: repeat;
        }
        </style>
    </head>

    <script type="text/javascript">

    function saveScrollPositions(theForm) {
        if(theForm) {
            var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset
                                                   : document.documentElement.scrollTop;
            var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset
                                                  : document.documentElement.scrollLeft;
            theForm.scrollx.value = scrollx;
            theForm.scrolly.value = scrolly;
        }
    }
    </script>

 <form action="enroll.php" name="enrollment" method="post" onsubmit="return saveScrollPositions (this);">
  <input type="hidden" name="scrollx" id="scrollx" value="0" />
  <input type="hidden" name="scrolly" id="scrolly" value="0" />

  <STYLE type="text/css">
   #Nav a{ position:relative; display:block; text-decoration: none; color:Black; }
   Body td{font-Family: Arial; font-size: 12px; }
  </style>

最初の回答のいくつかを読んだ後、私はそれをこれに変更しました...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
body
{ 
    background-image: url('../Images/Black-BackGround.gif');
    background-repeat: repeat;
}
</style>
</head>


<script>
function refreshPage () {
    var page_y = $( document ).scrollTop();
    window.location.href = window.location.href + '?page_y=' + page_y;
}
window.onload = function () {
    setTimeout(refreshPage, 35000);
    if ( window.location.href.indexOf('page_y') != -1 ) {
        var match = window.location.href.split('?')[1].split("&")[0].split("=");
        $('html, body').scrollTop( match[1] );
    }
}
</script>

<STYLE type="text/css">
#Nav a{ position:relative; display:block; text-decoration: none; color:black; }
Body td{font-Family: Arial; font-size: 12px; }
</style>
4

8 に答える 8

13

ローカル ストレージを使用したくない場合は、ページの y 位置を URL にアタッチし、ロード時に js でそれを取得して、渡した get パラメータにページ オフセットを設定できます。

//code to refresh the page
var page_y = $( document ).scrollTop();
window.location.href = window.location.href + '?page_y=' + page_y;


//code to handle setting page offset on load
$(function() {
    if ( window.location.href.indexOf( 'page_y' ) != -1 ) {
        //gets the number from end of url
        var match = window.location.href.split('?')[1].match( /\d+$/ );
        var page_y = match[0];

        //sets the page offset 
        $( 'html, body' ).scrollTop( page_y );
    }
});
于 2013-07-14T20:16:20.627 に答える
10

localStorage の代わりに sessionStorage を使用するように Sanoj Dushmantha の回答を修正しました。ただし、ドキュメントにもかかわらず、ブラウザーはブラウザーを閉じた後でもこのデータを保存します。この問題を解決するために、リセット後にスクロール位置を削除しています。

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var scrollpos = sessionStorage.getItem('scrollpos');
        if (scrollpos) {
            window.scrollTo(0, scrollpos);
            sessionStorage.removeItem('scrollpos');
        }
    });

    window.addEventListener("beforeunload", function (e) {
        sessionStorage.setItem('scrollpos', window.scrollY);
    });
</script>
于 2020-07-13T18:13:47.713 に答える
9

アップデート

document.location.reload(true)以下の強制的なトリックの代わりに、以下のように使用できます。

HTML を次のように置き換えます。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body { 
                background-image: url('../Images/Black-BackGround.gif');
                background-repeat: repeat;
            }
            body td {
               font-Family: Arial; 
               font-size: 12px; 
            }
            #Nav a { 
                position:relative; 
                display:block; 
                text-decoration: none; 
                color:black; 
            }
        </style>
        <script type="text/javascript">
            function refreshPage () {
                var page_y = document.getElementsByTagName("body")[0].scrollTop;
                window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
            }
            window.onload = function () {
                setTimeout(refreshPage, 35000);
                if ( window.location.href.indexOf('page_y') != -1 ) {
                    var match = window.location.href.split('?')[1].split("&")[0].split("=");
                    document.getElementsByTagName("body")[0].scrollTop = match[1];
                }
            }
        </script>
    </head>
    <body><!-- BODY CONTENT HERE --></body>
</html>
于 2013-07-15T03:04:11.353 に答える
7

これはリフレッシュにも役立つかもしれません。ただし、同じ位置をクリックする前にページ上の位置を追跡したい場合は..次のコードが役立ちます。

また、ユーザーが本当にそれを行いたいかどうかを確認するためのデータ確認を追加しました..

注: jQuery とjs-cookie.jsを使用して Cookie 情報を保存しています。

$(document).ready(function() {
    // make all links with data-confirm prompt the user first.
    $('[data-confirm]').on("click", function (e) {
        e.preventDefault();
        var msg = $(this).data("confirm");
        if(confirm(msg)==true) {
            var url = this.href;
            if(url.length>0) window.location = url;
            return true;
        }
        return false;
    });

    // on certain links save the scroll postion.
    $('.saveScrollPostion').on("click", function (e) {
        e.preventDefault();
        var currentYOffset = window.pageYOffset;  // save current page postion.
        Cookies.set('jumpToScrollPostion', currentYOffset);
        if(!$(this).attr("data-confirm")) {  // if there is no data-confirm on this link then trigger the click. else we have issues.
            var url = this.href;
            window.location = url;
            //$(this).trigger('click');  // continue with click event.
        }
    });

    // check if we should jump to postion.
    if(Cookies.get('jumpToScrollPostion') !== "undefined") {
        var jumpTo = Cookies.get('jumpToScrollPostion');
        window.scrollTo(0, jumpTo);
        Cookies.remove('jumpToScrollPostion');  // and delete cookie so we don't jump again.
    }
});

使用例はこんな感じ。

<a href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>
于 2016-11-18T20:29:34.840 に答える