8

データベースにデータを送信してから、ユーザーがちょうどオンになっていたのと同じページをリロードしています。ユーザーがちょうどオンになっていたスクロール位置を記憶する方法があるかどうか疑問に思いました。

4

8 に答える 8

17

送信の重要な部分を見逃していることに気付いたので、スクロール中にCookieを保存する元の方法ではなく、クリックイベントでCookieを保存するようにコードを微調整することにしました。

これを行うjqueryの方法は次のとおりです。

jsfiddle （ フレームの外で表示したい場合は、URLの最後に追加するだけです）/show

非常に重要なのは、 jquerycookieプラグインが必要になることです。

jQuery：

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When a button is clicked...
    $('#submit').on("click", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

元の回答のコードは次のとおりです。

jsfiddle

jQuery：

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When scrolling happens....
    $(window).on("scroll", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

@Codyの答えは私に何か重要なことを思い出させました。

確認して縦方向にスクロールするだけにしました。

于 2012-10-05T10:48:17.977 に答える
4

(1) 解決策 1:

まずは送信ボタンクリック時のスクロール位置をJavaScriptで取得します。

次に、PHP ページに送信されるデータにこのスクロール位置の値を含めます。

3 番目に、PHP コードは、生成された HTML にこの値を JS 変数として書き戻す必要があります。

<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>

4番目に、JSを使用して、JS変数「Scroll_Pos」で指定された位置までスクロールします

(2) 解決策 2:

Cookie に位置を保存し、JS を使用して、ページのリロード時に保存された位置にスクロールします。

于 2012-10-05T10:23:22.083 に答える
4

隠しフィールドに位置を保存します。

<form id="myform">
  <!--Bunch of inputs-->
</form>

jQueryストアよりもscrollTopとscrollLeft

$("form#myform").submit(function(){
   $(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");

   $(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});

次回のリロードよりもリダイレクトを行うか、PHPでそれらを印刷します

$(document).ready(function(){
   <?php
      if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
         echo "window.scrollTo(".$_REQUEST["scrollLeft"].",".$_REQUEST["scrollTop"].")";
   ?>
});
于 2012-10-05T10:34:03.123 に答える
0

コードで _targets を使用すると、それを保存できます。

または、ajax リクエストを実行して window.height を取得することもできます。

 document.body.offsetHeight;

次に、それらを元に戻し、変数をjavascriptに渡して、それらのページを移動します。

于 2012-10-05T10:22:52.367 に答える
0

すべてのページをスクロールする このコードを使用する

$(document).ready(function (e) {
    let UrlsObj = localStorage.getItem('rememberScroll');
    let ParseUrlsObj = JSON.parse(UrlsObj);
    let windowUrl = window.location.href;

    if (ParseUrlsObj == null) {
        return false;
    }

    ParseUrlsObj.forEach(function (el) {
        if (el.url === windowUrl) {
            let getPos = el.scroll;
            $(window).scrollTop(getPos);
        }
    });

});

function RememberScrollPage(scrollPos) {

    let UrlsObj = localStorage.getItem('rememberScroll');
    let urlsArr = JSON.parse(UrlsObj);

    if (urlsArr == null) {
        urlsArr = [];
    }

    if (urlsArr.length == 0) {
        urlsArr = [];
    }

    let urlWindow = window.location.href;
    let urlScroll = scrollPos;
    let urlObj = {url: urlWindow, scroll: scrollPos};
    let matchedUrl = false;
    let matchedIndex = 0;

    if (urlsArr.length != 0) {
        urlsArr.forEach(function (el, index) {

            if (el.url === urlWindow) {
                matchedUrl = true;
                matchedIndex = index;
            }

        });

        if (matchedUrl === true) {
            urlsArr[matchedIndex].scroll = urlScroll;
        } else {
            urlsArr.push(urlObj);
        }


    } else {
        urlsArr.push(urlObj);
    }

    localStorage.setItem('rememberScroll', JSON.stringify(urlsArr));

}

$(window).scroll(function (event) {
    let topScroll = $(window).scrollTop();
    console.log('Scrolling', topScroll);
    RememberScrollPage(topScroll);
});
于 2019-07-30T10:57:26.920 に答える