Question

除了主HTML之外，我还有3个文件：test.html，test2.html和test3.html。当您按下其中一个按钮时，页面将被加载。所以我希望在页面加载之间保存滚动位置。示例：您加载页面测试然后滚动到中间，加载页面test2，滚动到结尾，加载页面测试，它应该在中间。

我如何存档？

＆＃13;

<!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>

＆＃13;

Answer 1

这可以通过多种方式实现您的目标

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle：https://jsfiddle.net/s5dkL5nn/7/

Answer 2

要记住所有页面的滚动，请使用此代码

$(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);
});

Answer 3

如果我正确理解你的问题，

这就是你需要做的事情：

在加载新页面之前，您要将页面的当前位置保存在变量中。并将滚动位置设置为再次调用该页面时保存的值。

<!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>

记得使用jquery在每个页面上滚动

3 个答案: