jqueryを使用して各ページをスクロールする場所を覚えてください

メインHTML以外にtest.html、test2.html、およびtest3.htmlの3つのファイルがあります。いずれかのボタンを押すと、ページが読み込まれます。だから、私はスクロール位置をページロードの間に保存したい。例：ページテストを読み込んでから中央にスクロールし、ページtest2をロードし、最後までスクロールし、ページを読み戻します。中央に配置する必要があります。jqueryを使用して各ページをスクロールする場所を覚えてください

どうすればこのファイルをアーカイブできますか？

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery load() Demo</title> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $("#button1").click(function() { 
 
     $("#box").load("test.html"); 
 
     }); 
 
     $("#button2").click(function() { 
 
     $("#box").load("test2.html"); 
 
     }); 
 
     $("#button3").click(function() { 
 
     $("#box").load("test3.html"); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div style="position: fixed;"><button id="button1">test</button> <button id="button2">test2</button> <button id="button3">test3</button> </div> 
 
    <br><br> 
 
    <div id="box"> 
 
    <h2>Click button to load new content inside DIV box</h2> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-03-10 mody

私はあなたの質問を理解することができませんでした。私たちはあなたが望むものを理解することができるように改訂してください。 –

現在のコードはhtmlページを読み込みますか？ – CaptainHere

div id = "box"にtest.htmlをロードし、私のページを中央にスクロールしてtest2.htmlをロードし、test.htmlに戻ります。それが正しい位置にあるようにします @NelsonTeixeira – mody

-1

私が正しくあなたの問題を理解していれば、ここで、あなたがする必要があるものです：

あなたはつもりは新しいものをロードする前に、変数内のページの現在の位置を保存し直します。また、スクロール位置を、そのページを再度呼び出すときに保存した値に設定します。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>jQuery load() Demo</title> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
     var pos = {} 
     var lastLoaded 
     $('.btn').click(function(e) { 
     v = e.target.value 
     pos[lastLoaded] = $('body').scrollTop() 
     $("#box").load(v); 
     lastLoaded = v 
     if(pos[v]) 
      $('body').scrollTop(pos[v]) 
     else 
      $('body').scrollTop(0) 
     }) 
     }); 
    </script> 
</head> 

<body> 
    <div style="position: fixed;"> 
    <button class="btn" id="button1" value="test1.html">test</button> 
    <button class="btn" id="button2" value="test2.html">test2</button> 
    <button class="btn" id="button3" value="test3.html">test3</button> 
    </div> 
    <br><br> 
    <div id="box"> 
    <h2>Click button to load new content inside DIV box</h2> 
    </div> 

</body> 
</html>

出典

2017-03-10 20:22:21 mockingjay

それは私のために働いていません – mody

あなたは正しいです。今すぐ確認してください – mockingjay

ありがとうございます – mody

これは、あなたが

function currPos() { // crossbrowser get actual scroll position 
 
    return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
 
} 
 

 
function loadAndSavePosition(button) { 
 
    var pos = currPos(); // obtain current position 
 
    if (page) // if there is a loaded page, save the position of the actual page 
 
    scrollData[page] = pos; 
 
    page = button.target.innerText; 
 
    // simulates page load 
 
    h2.innerHTML = (button.target.innerText + ' ').repeat(10000); 
 
    if (scrollData[page]) { //if there is an already save value ... 
 
    window.scrollTo(0, scrollData[page]); // ...move to that position... 
 
    } else { // ... or to the top if there isn't. 
 
    scrollData[page] = 0; 
 
    window.scrollTo(0, 0); 
 
    } 
 
} 
 

 
var h2 = document.getElementById('h2'); 
 
var button1 = document.getElementById('button1'); 
 
var button2 = document.getElementById('button2'); 
 
var button3 = document.getElementById('button3'); 
 
var page = ''; // loaded page 
 
var scrollData = {}; // object for saving the page scroll positions 
 

 
// associate onclick event to the loadAndSavePosition function 
 
[].slice.call(document.getElementsByTagName('button')).forEach(
 
    button => button.onclick = loadAndSavePosition);

<div style="position: fixed;"> 
 
    <button id="button1">test</button> 
 
    <button id="button2">test2</button> 
 
    <button id="button3">test3</button> 
 
</div> 
 
<br> 
 
<br> 
 
<div id="box"> 
 
    <h2 id='h2'>Click button to load new content inside DIV box</h2> 
 
</div>

JSFiddleやりたいことには多くの方法のONDEです：https://jsfiddle.net/s5dkL5nn/7/

出典

2017-03-10 20:53:33

ありがとうございました。私のページはどこですか？test.html putted – mody

load（button.target.innerText + ".html"）; 'の代わりに' h2.innerHTML =（button.target.innerText + ''）.repeat（10000）;を実行します。しかし、主なことは、私がスクロールポーズの保存と再配置をどのようにしたのかを理解することです。そのため、独自のバージョンを作成することができます。私はここにページを読み込むことができないので、私はそれをシミュレートしました。 –

私はtest.htmlでその部分からコードを準備し、私はロードされますか？ – mody

jqueryを使用して各ページをスクロールする場所を覚えてください

答えて

関連する問題