現在の位置にリロードするページ

Question

幅が600vwのページがあります。
これはスライドショーと同じように動作しますが、その後はページで動作します。

問題は、ページをリフレッシュして最初の位置にロードするのではなく、現在の位置にロードしたくないということです。
私はScrollTop()でそれを行う方法についていくつかのことを読んで、私もScrollTop()をScrollLeft()にチャンスしようとしましたが、うまくいきません。

var page_y = $(document).ScrollLeft(); 
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').ScrollLeft(page_y); 
    } 
}); 

もdocument.location.reload(true)私は私のコードでそれを更新すると、それはちょうど私が使用したい

502不正なゲートウェイ

を与え、動作しません：はコードを参照してくださいPHPまたはjquery/javascript

現在のコード：

$(document).ready(function() { 
 
     $('button').click(function() { 
 
      $('button.current').removeClass('current'); 
 
      $(this).addClass('current'); 
 
     }); 
 
     $('#slide1').click(function() { 
 
      article.style.left = "0"; 
 
     }); 
 
     $('#slide2').click(function() { 
 
      article.style.left = "-500px"; 
 
     }); 
 
     $('#slide3').click(function() { 
 
      article.style.left = "-1000px"; 
 
     }); 
 
}); 
 

* { 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html{ 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
 
    margin: 0 0 30px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 10; 
 
    background: #ffe7d9; 
 
} 
 

 
nav{ 
 
    width: 500px; 
 
} 
 

 
nav button{ 
 
    width: 30%; 
 
    box-sizing: border-box; 
 
    display: inline; 
 
    list-style-type: none; 
 
    cursor: pointer; 
 
} 
 

 
article { 
 
    width: 1500px; 
 
    position: absolute; 
 
} 
 

 
.page{ 
 
    width: 490px; 
 
    height: 500px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav id="menu"> 
 
     <ul> 
 
      <button id="slide1"><li>slide1</li></button> 
 
      <button id="slide2"><li>slide2</li></button> 
 
      <button id="slide3"><li>slide3</li></button> 
 
     </ul> 
 
    </nav> 
 
</header> 
 
<article id='article'> 
 
<div class='page' style='background-color: green;'></div> 
 
<div class='page' style='background-color: red;'></div> 
 
<div class='page' style='background-color: yellow;'></div> 
 
</article>

私は

var page_y = $(document).scrollLeft(); 

//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 temp_page_y = match[0]; 

     //sets the page offset 
     $('html, body').scrollLeft(temp_page_y); 
    } else { 
     /****** the code *****/ 
     window.location.href = window.location.href + '?page_y=' + page_y; 
    } 
}); 

を追加する場合のコードは、あなたがウィンドウにpage_yで新しいURLを設定している

Answer 1

を動作しません。スクリプトの.location.hrefあなたのページが毎回リロードされる理由です。これをelseの状態で使用してください。

var page_y = $(document).scrollLeft(); 

//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 temp_page_y = match[0]; 

     //sets the page offset 
     $('html, body').scrollLeft(temp_page_y); 
    } else { 
     /****** the code *****/ 
     window.location.href = window.location.href + '?page_y=' + page_y; 
    } 
});