Как запомнить положение прокрутки и прокрутить назад - PullRequest
Новая
       15

Как запомнить положение прокрутки и прокрутить назад

2 голосов
/ 21 февраля 2012

Я использую библиотеку html2canvas, и когда я вызываю html2canvas.Parse (), страница прокручивается вверх.

Я подумал, что если я смогу запомнить позицию перед вызовом html2canvas.Parse (), то я смогу вернуться к исходной позиции прокрутки.

  1. получить текущую позицию прокрутки браузера (особенно вертикальную)?
  2. прокрутить назад к позиции, которую я сохранил ранее?

1 Ответ

0 голосов
/ 13 июля 2018
  1. Сохранение позиции прокрутки в переменной
  2. Что-то сделать
  3. Прокрутка назад

Я использую jQuery в приведенном ниже примере, чтобы упростить задачуно вы могли бы легко сделать то же самое в Vanilla JS. 

var scrollPos;

$('.button').on('click', function() {
  
  // save scroll position to a variable
  scrollPos = $(window).scrollTop();
  
  // do something
  $('html, body').animate({
    scrollTop: $("#cats").offset().top
  }, 500);
  
  // scroll back
  setTimeout(
    function() {
      $('html, body').animate({
        scrollTop: scrollPos
      }, 500);
    }, 1000);
});
.button {
  position: fixed;
  font-size: 12px;
  margin: 10px;
}

#rainbow {
  height: 2000px;
  background: -webkit-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
  background: -o-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
  background: -moz-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
  background: linear-gradient(red, orange, yellow, green, cyan, blue, violet);
}

#cats {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input class="button" value="Scroll down a bit then click here for 1 second of cats!" type="button">
<div id="rainbow"></div>
<img id="cats" title="By Alvesgaspar [CC BY-SA 3.0 
 (https://creativecommons.org/licenses/by-sa/3.0
)], via Wikimedia Commons" width="1024" alt="Cat poster 1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/1024px-Cat_poster_1.jpg">
...