2012-10-05 7 views
5

のスクロール位置を覚えていますか?は、どのように私はその後、私のデータベースにいくつかのデータを送信し、ユーザーがちょうどにしたスクロール位置を覚えておく方法がある場合だけで、私が思っていたたユーザーと同じページをリロードしていますページ

+1

クッキーについてはどうですか? – VisioN

+0

クッキーに現在のスクロール位置を保存し、後でページをロードするときにそれを再利用します。 –

答えて

15

でそれらを印刷クッキーをスクロールする際のオリジナルの保存方法ではなく、クリックイベントに保存するようにコードを調整することにしました。


ここでそれを行うためのjQueryの方法です:

jsfiddle、非常に重要なのは、あなたを

を(あなたがフレームの外にそれを表示したい場合だけでURLの末尾に/showを追加) jquery cookie pluginが必要です。

のjQuery:

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 a button is clicked... 
    $('#submit').on("click", function() { 

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

    }); 

}); 


はここでまだ元の答えからコードです

// 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()); 

    }); 

}); 

@コーディーの答えは何か重要なことを思い出させました。

の位置にチェックしてスクロールするだけでした。

+0

bam!それは完璧に機能し、ちょうどあなたが私のコードに持っていたものを追加し、それは即座に働いた:)感謝のトン。 – HurkNburkS

+0

おそらく私はjQuery v1.5.1(?)を使っているので、このバリアントを使用するには、$(window).scroll(function(){// set cookie}); – fiat

+0

@fiatはい。 '.on()'メソッドはjquery 1.7で追加されました。 – Joonas

0

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

または、ajaxリクエストでwindow.heightを取得できます。

document.body.offsetHeight; 

次に、変数をjavascriptに戻してページを移動します。

4

(1)解決策1:

まず、送信ボタンをクリックしたときにはJavaScriptでスクロール位置を取得します。

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

第三に、PHPコードはJS変数として生成されるHTMLに戻し、この値を書き込む必要があります。

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

第四に、JSの変数 'Scroll_Pos'

(で指定された位置にスクロールするJSを使用2)解決方法2:

保存クッキー内の位置は、そのページをリロードしたときに保存された位置にスクロールするJSを使用しています。

+1

大丈夫です..研究の束をしなければならないでしょう。 – HurkNburkS

3

隠しフィールドに位置を格納します。 jQueryを使ってより

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

は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["scrollTop"].",".$_REQUEST["scrollLeft"].")"; 
    ?> 
}); 
関連する問題

 関連する問題