主页 / 问题 / 748558
Accepted
pridan
Asked:2020-11-23 17:43:28 +0000 UTC2020-11-23 17:43:28 +0000 UTC

滚动后返回到单击的相同位置

  • 772

有一个页面。它包含带有内容的块，通过单击块的名称，它会滚动到站点标题。有必要通过单击“返回”按钮返回到相同的块（他们离开的块）。请告诉我如何实现它。问题是有很多块，并且只有一个返回按钮。无法使用锚点，因为您需要以某种方式找出您离开了哪个街区......我将感谢您的帮助我草拟了一个示例。

$(function() {
  $('h2').click(function() {
    $('html, body').animate({scrollTop: 0},500);
    return false;
  })
})
.container {
  margin: 0 auto;
  max-width: 780px;
}

h2 {
  cursor: pointer;
}

h2:hover {
  cursor: pointer;
  transition: .3s;
  opacity: .7;
}

ul li {
  list-style-type: none;
  padding: 5px;
}

ul {
  padding: 5px;
}

ul li:nth-child(odd) {
  background: #ccc;
}

header {
  display: flex;
  justify-content: space-around;
}

h1, .back {
  display: flex;
  margin: auto;
}

.back {
  color: darkslateblue;
  font-weight: 600;
  cursor: pointer;
}

.back:hover {
  transition: .3s;
  opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <header>
        <H1>Example</H1>
        <span class="back">Back &darr;</span>
    </header>
    <ul>
        <li>
            <h2>Test2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test5</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test6</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test7</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test8</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test9</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test10</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test11</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>

    </ul>
<div>

javascript

1 个回答

  1. Best Answer

    event.pageY - 从页面开始到点击点的距离。按返回时只需滚动到它

    $(function() {
  var scroll_height = 0;

  $('h2').click(function(event) {
    scroll_height = event.pageY;
    $('html, body').animate({scrollTop: 0},500);
    return false;
  });

  $('.back').click(function(event) {
    if(scroll_height){
          $('html, body').animate({scrollTop: scroll_height},500);
    }
    return false;
  })

})
    .container {
  margin: 0 auto;
  max-width: 780px;
}

h2 {
  cursor: pointer;
}

h2:hover {
  cursor: pointer;
  transition: .3s;
  opacity: .7;
}

ul li {
  list-style-type: none;
  padding: 5px;
}

ul {
  padding: 5px;
}

ul li:nth-child(odd) {
  background: #ccc;
}

header {
  display: flex;
  justify-content: space-around;
}

h1, .back {
  display: flex;
  margin: auto;
}

.back {
  color: darkslateblue;
  font-weight: 600;
  cursor: pointer;
}

.back:hover {
  transition: .3s;
  opacity: .7;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <header>
        <H1>Example</H1>
        <span class="back">Back &darr;</span>
    </header>
    <ul>
        <li>
            <h2>Test2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test5</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test6</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test7</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test8</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test9</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test10</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test11</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>
        <li>
            <h2>Test12</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
        </li>

    </ul>
<div>

    • 1

相关问题