Javascript Get and Set Scroll Position Of Scrollable Content | ScrollStash

scroll-stash is a small javascript library that saves the consumer scrolling location within the original volume and automatically scrolls to the final scroll location on the reloaded webpage or the next move to it.

How to make use of it:

1. Load the primary script within the doc.

<script src="./dist/scripts.js"></script>

2. Add the data-scroll-stash attribute to a scrollable container.

<div class="scroll-box" data-scroll-stash="example">
  ...
</div>

3. Initialize  scroll-stash and finished.

const scrollStash = new ScrollStash();
scrollStash.init();

4. Set a customized scroll place you need to scroll to.

<div class="scroll-box" 
     data-scroll-stash="example"
     data-scroll-stash-anchor=".anchor">
     ...
     <div class="anchor">Active Element</div>
</div>
// or
<div class="scroll-box" 
     data-scroll-stash="example">
     ...
     <div class="is-active">Active Element</div>
</div>
<script>
const scrollStash = new ScrollStash({
      selectorAnchor: '.is-active',
});
</script>

5. All default choices.

const scrollStash = new ScrollStash(
      autoInit: false,
      dataScroll: 'scroll-stash',
      dataAnchor: 'scroll-stash-anchor',
      selectorAnchor: '',
      selectorAnchorParent: '',
      selectorTopElem: '',
      selectorBotElem: '',
      saveKey: 'ScrollStash',
      throttleDelay: 500,
      positionBottom: true,
      padding: 16
);

Maintain Scroll Position Of Scrollable Content, scroll stash Plugin/Github


See Demo And Download

Official Website(sebnitu): Click Here

This superior jQuery/javascript plugin is developed by sebnitu. For extra Advanced Usage, please go to the official website.

Share