データベースにデータを送信してから、ユーザーがちょうどオンになっていたのと同じページをリロードしています。ユーザーがちょうどオンになっていたスクロール位置を記憶する方法があるかどうか疑問に思いました。
8 に答える
送信の重要な部分を見逃していることに気付いたので、スクロール中に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() );
});
});
元の回答のコードは次のとおりです。
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の答えは私に何か重要なことを思い出させました。
確認して縦方向にスクロールするだけにしました。
(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 を使用して、ページのリロード時に保存された位置にスクロールします。
隠しフィールドに位置を保存します。
<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"].")";
?>
});
コードで _targets を使用すると、それを保存できます。
または、ajax リクエストを実行して window.height を取得することもできます。
document.body.offsetHeight;
次に、それらを元に戻し、変数をjavascriptに渡して、それらのページを移動します。
すべてのページをスクロールする このコードを使用する
$(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);
});