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
<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
<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
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
// 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
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
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
And conditionally disable animated scrolling in JS:
javascript
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
<!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.