Sothink JavaScript Web Scroller: Features, Tips, and Examples

How to Create Smooth Scrolling with Sothink JavaScript Web Scroller

Smooth scrolling improves user experience by making navigation transitions feel natural and polished. This guide shows a practical, step-by-step method to create smooth scrolling using Sothink JavaScript Web Scroller, including setup, configuration, customization, and performance tips.

What you’ll need

• A basic website (HTML/CSS) and a code editor
• Sothink JavaScript Web Scroller files (library JS and optional CSS) — assume you have them available locally or via your download

1. Include the scroller library

Place the required JS (and optional CSS) in your page. Put JS just beforefor better load performance.

html
Copy CodeCopied

<link rel=“stylesheet” href=“path/to/sothink-scroller.css”>




<script src=“path/to/sothink-web-scroller.min.js”></script>
<script>
  // Initialize after DOM is ready
  document.addEventListener(‘DOMContentLoaded’, function () {
    // Basic initialization (assumes global SothinkScroller constructor)
    window.scroller = new SothinkScroller({
      duration: 600,           // milliseconds
      easing: ‘easeInOutQuad’, // easing function name
      offset: 0,               // additional offset (px)
      selector: ‘a[href^=“#”]’ // elements that trigger scroller
    });
  });
</script>

2. Mark up your anchors and target sections

Use in-page anchors to scroll between sections.

html
Copy CodeCopied
<nav>
  <a href=“#section1”>Section 1</a>
  <a href=“#section2”>Section 2</a>
  <a href=“#contact”>Contact</a>
</nav>

<section id=“section1”>…</section>
<section id=“section2”>…</section>
<section id=“contact”>…</section>

3. Customize behavior options

Common options to tweak:

• duration: time in ms for the scroll animation (300–1000 typical)
• easing: smoothing curve (e.g., linear, easeInOutQuad, easeOutCubic)
• offset: negative to lift content under fixed headers (e.g., -70)
• selector: which links trigger the scrolling
• interruptOnUserScroll: boolean to allow user to stop animation by scrolling

Example with a fixed header offset:

javascript
Copy CodeCopied
window.scroller = new SothinkScroller({
  duration: 700,
  easing: ‘easeOutCubic’,
  offset: -70,
  selector: ‘a[href^=“#”]’,
  interruptOnUserScroll: true
});

4. Smooth scrolling to arbitrary positions

Programmatically scroll to a pixel position or element:

javascript
Copy CodeCopied
// Scroll to 500px from top
window.scroller.scrollTo(500);

// Scroll to an element
const el = document.querySelector(’#contact’);
window.scroller.scrollToElement(el);

5. Handle hash changes and history

Keep URL hashes in sync so back/forward navigation works:

javascript
Copy CodeCopied
window.addEventListener(‘click’, function (e) {
  const a = e.target.closest(‘a[href^=“#”]’);
  if (!a) return;
  e.preventDefault();
  const id = a.getAttribute(‘href’);
  const target = document.querySelector(id);
  if (target) {
    window.scroller.scrollToElement(target).then(function () {
      history.pushState(null, “, id);
    });
  }
});

If the library already handles hashes, prefer its built-in option.

6. Accessibility considerations

• Ensure keyboard focus follows scroll target: after scrolling, call target.focus({preventScroll:true}) and give it tabindex=”-1” if needed.
• Respect reduced-motion preference:

css
Copy CodeCopied
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

And conditionally disable animated scrolling in JS:

javascript
Copy CodeCopied
const prefersReduced = window.matchMedia(’(prefers-reduced-motion: reduce)’).matches;
if (!prefersReduced) {
  // init scroller
}

7. Performance tips

• Initialize after main content loads.
• Avoid animating large repaints during scroll; keep scroll animations purely transform/position driven.
• Throttle event handlers and avoid heavy DOM reads/writes during animation.

8. Troubleshooting

• If scroll feels jumpy, check for CSS transitions on the html/body or interfering scroll libraries.
• If offset calculation is wrong, ensure measurements account for box-sizing, margins, and fixed headers.
• For mobile issues, test momentum scrolling and possible conflict with touch handlers.

Example: Complete minimal page

html
Copy CodeCopied
<!doctype html>
<html>
<head>
  <meta charset=“utf-8”>
  <title>Smooth Scroll Demo</title>
  <link rel=“stylesheet” href=“path/to/sothink-scroller.css”>
  <style>
    body { font-family: sans-serif; }
    section { height: 100vh; padding: 40px; }
    header { position: fixed; top:0; left:0; right:0; height:60px; background:#fff; z-index:10; }
    main { padding-top:60px; }
  </style>
</head>
<body>
  <header>
    <nav><a href=“#s1”>S1</a> <a href=“#s2”>S2</a> <a href=“#contact”>Contact</a></nav>
  </header>
  <main>
    <section id=“s1”>Section 1</section>
    <section id=“s2”>Section 2</section>
    <section id=“contact”>Contact</section>
  </main>

  <script src=“path/to/sothink-web-scroller.min.js”></script>
  <script>
    document.addEventListener(‘DOMContentLoaded’, function () {
      if (!window.matchMedia(’(prefers-reduced-motion: reduce)’).matches) {
        window.scroller = new SothinkScroller({
          duration: 650,
          easing: ‘easeInOutQuad’,
          offset: -60,
          selector: ‘a[href^=“#”]’,
          interruptOnUserScroll: true
        });
      }
    });
  </script>
</body>
</html>

Summary

• Include the Sothink Web Scroller script, mark up anchors, initialize with sensible defaults, and customize duration/easing/offset.
• Respect prefers-reduced-motion and keyboard focus for accessibility.
• Test on desktop and mobile and tweak offset and duration for the smoothest feel.