How to Build Scrolling Websites with Scrollify

To make a website scroll one section at a time, load jQuery and the Scrollify script, then initialize Scrollify with a CSS selector that matches the panels you want to snap between. For example, use $.scrollify({ section: ".panel" }) after the DOM is ready. Scrollify is a jQuery plugin for vertical section scrolling; it does not provide horizontal snapping.

This guide covers setup, named sections, headers and footers, long content, navigation, resizing, accessibility checks, troubleshooting, and when to disable snapping. The project documentation requires jQuery 1.7 or newer. Its stated browser support and mobile behavior are project claims, so verify compatibility with the exact versions and browsers your site supports.

1. Install and load Scrollify

The project documents installation with Bower or npm. Confirm the package version and its dependency metadata in your own build environment; package records are version-specific. The repository README and documentation are the authoritative references for installation and options: Scrollify repository and Scrollify documentation and demo.

For a simple page, include jQuery first and the Scrollify script second, then initialize after the document is ready. Replace the script source paths with the files provided by your package or asset pipeline.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollify example</title>
  <style>
    html, body { margin: 0; }
    .panel {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
      box-sizing: border-box;
    }
  </style>
  <script src="/path/to/jquery.js"></script>
  <script src="/path/to/jquery.scrollify.js"></script>
</head>
<body>
  <main>
    <div class="panel"><h1>First panel</h1></div>
    <div class="panel"><h2>Second panel</h2></div>
    <div class="panel"><h2>Third panel</h2></div>
  </main>
  <script>
    $(function () {
      $.scrollify({ section: ".panel" });
    });
  </script>
</body>
</html>

The HTML element type is not special: Scrollify selects whichever elements match the configured selector. Keep the selector limited to the panels that should participate in snapping.

2. Configure section behavior

Scrollify’s documented options cover the section selector, section names, interstitial content, easing and animation speed, offsets, scrollbar behavior, areas that retain ordinary scrolling, height assignment, overflow handling, hash updates, touch handling, and lifecycle callbacks. Read the documentation for defaults and the complete option signatures for the version you install. The following example uses named panels and updates the URL hash:

<main>
  <div class="panel" data-section-name="intro">Introduction</div>
  <div class="panel" data-section-name="work">Work</div>
  <div class="panel" data-section-name="contact">Contact</div>
</main>
<script>
  $(function () {
    $.scrollify({
      section: ".panel",
      sectionName: "section-name",
      updateHash: true
    });
  });
</script>

With sectionName: "section-name", the corresponding attributes are data-section-name. Scrollify can update the URL fragment as the active section changes, so a section can be linked directly. Check that your own IDs and fragments do not conflict with those generated section names, and verify browser back and forward behavior in your page.

Option guide

Option or control	What it is for	What to check
section	CSS selector for panels that participate in snapping.	It should match only intended panels and match elements present at initialization.
sectionName, updateHash	Associate panel data attributes with section names and reflect navigation in the URL fragment.	Use unique, stable names and test deep links and browser history.
interstitialSection	Identify non-panel regions such as a header or footer.	Check transitions around areas that should not occupy a full panel.
easing, scrollSpeed, offset	Adjust the animation curve, duration, and destination offset.	Choose motion that does not make navigation feel slow or disorienting; verify the offset against fixed headers.
scrollbars	Control scrollbar behavior.	Keep navigation understandable when the scrollbar is hidden or altered.
standardScrollElements	Allow ordinary scrolling inside selected elements, such as an embedded frame or map.	Test wheel, touch, and trackpad input inside and outside the exempt element.
setHeights, overflowScroll	Control assigned section heights and scrolling within sections whose content overflows.	Check sections with late-loading or collapsed content; incorrect containment can lead to wrong height calculations.
touchScroll	Control touch scrolling behavior.	Test on real touch devices and consider disabling Scrollify for layouts where free scrolling is more usable.
before, after, afterResize, afterRender	Run code around section transitions, resize, or rendering.	Keep callbacks small and safe to call as the page changes size or content.

Do not copy a configuration option just because it appears in an example. Start with the section selector, then add hash handling, interstitial areas, overflow behavior, or callbacks only where your page needs them.

3. Handle headers, long panels, and ordinary scrolling

Use interstitialSection for regions such as a header or footer that are not full-height panels. This keeps those regions from being treated as ordinary snap sections. Confirm the resulting section positions when you have fixed navigation or content above the first panel.

For long panels, configure overflowScroll if users need to scroll within a panel before moving to the next one. The project documentation warns that collapsed or improperly contained content can lead to incorrect section-height calculations. Test with the actual content, including images and embeds that load after initialization.

Use standardScrollElements to exempt selected content from the section behavior when it needs ordinary scrolling. A map, embedded frame, or long inner region can otherwise compete with page-level snapping for the same scroll gesture. Test the handoff between inner and outer scrolling with a mouse wheel, trackpad, and touch input.

4. Navigate by section and respond to layout changes

The documented API includes methods for animated or instant movement by index or named hash, next and previous navigation, recalculating layout with update(), and removing handlers and assigned heights with destroy(). It also offers enable and disable controls and accessors for the current panel and index. Consult the project documentation for the exact signatures supported by your installed version.

A navigation button can call the documented API after Scrollify has been initialized. For example, the project documents a next() method; wire it to a button like this:

<button type="button" id="next-panel">Next section</button>
<script>
  $(function () {
    $.scrollify({ section: ".panel" });
    $("#next-panel").on("click", function () {
      $.scrollify.next();
    });
  });
</script>

If your application inserts panels or changes their dimensions after initialization, call update() to ask Scrollify to recalculate. If you switch to a layout that should use normal document scrolling, use the documented enable or disable controls. If removing the behavior entirely, destroy() removes Scrollify’s event handlers and assigned heights.

Resize and dynamic-content behavior deserves a version-specific check. A historical issue reported a problem using update() after resize when setHeights was false; that report does not establish a current defect. Reproduce the behavior with your exact package version and browser if you use that configuration.

5. Check accessibility and mobile interaction

The project documentation describes touch handling and says Scrollify works well on mobile, but that is the project’s statement rather than an independent device audit. A snapping page changes ordinary scrolling expectations, so test the actual interaction before shipping.

• Navigate by keyboard and confirm focus remains visible and is not stranded in an off-screen panel.
• Test touch gestures, trackpads, browser zoom, and sections taller than the viewport.
• Check deep links, browser back and forward, and opening a fragment URL directly.
• Respect reduced-motion preferences in your page design; consider disabling snapping or reducing animation for users who request less motion.
• Ensure users can reach content in overflow panels and interactive embeds without getting trapped between inner and outer scrolling.
• Try the page at narrow viewport sizes and with late-loading fonts, images, and embeds.

The sources do not establish that these accessibility concerns are handled automatically by Scrollify. Treat them as acceptance checks for your implementation.

6. Troubleshoot common problems

Symptom	Likely cause	Fix
$.scrollify is undefined	Scrollify did not load, loaded before jQuery, or failed to load at all.	Load jQuery first, verify the Scrollify asset path and network response, and initialize only after both scripts are available.
Nothing snaps	The selector matches no elements, initialization runs too early, or Scrollify is disabled.	Inspect the selector in the browser, initialize after the DOM is ready, and check the enable or disable state.
Unexpected elements become sections	The selector is too broad or shared with unrelated page elements.	Use a dedicated class on intended panels and narrow the configured selector.
Panel content is cut off or difficult to reach	The panel exceeds the viewport and overflow behavior or element containment is unsuitable.	Test overflowScroll, use ordinary scrolling where appropriate, and check the actual content’s layout and height.
Header or footer snaps like a panel	Non-panel content was not identified as interstitial.	Configure interstitialSection for those regions and verify the boundaries.
Hash links point to the wrong place	Section names are missing, duplicated, or conflict with existing fragment handling.	Use unique data-section-name values, check sectionName, and test direct fragment navigation.
Positions are wrong after content changes	Panel dimensions changed after Scrollify calculated layout.	Call the documented update() after the change and reproduce resize cases against the installed version.
Scrolling inside an embed feels trapped	Page snapping and the embedded region are competing for the gesture.	Consider exempting the region with standardScrollElements and test the gesture handoff.
Touch or keyboard navigation feels inconsistent	Snapping alters the expected scroll and focus flow.	Test on the target devices, verify focus visibility, and disable Scrollify for layouts where continuous scrolling works better.

7. Performance, reliability, and maintenance

Scrollify adds event handling and section-position calculations to a page. The documentation describes a recalculation method and options for heights and overflow, but the research sources do not provide performance benchmarks. Keep callbacks lightweight, avoid initializing more elements than necessary, and call update() after material layout changes rather than repeatedly without need.

Reliability depends on the surrounding layout as well as the plugin: fonts, images, embeds, and dynamic content can change panel dimensions. Exercise the page at initial load, after content updates, after resize, and on the devices and browsers you support. The project README states a jQuery 1.7+ requirement and lists browser support including IE 8+, Chrome, Firefox, Opera, and Safari; treat that as project-published compatibility information, not a guarantee for current releases.

Package records differ: the jQuery Plugin Registry has a historical 0.1.3 entry dated June 29, 2014, while the jquery-scrollify 1.0.12 package metadata lists a jQuery 1.7+ dependency. They are distinct records, not evidence of a single current release. Check maintenance and compatibility before adopting Scrollify for a new project. For cost, the documented installation routes are software package managers; the cited sources do not state a Scrollify service fee.

8. Or skip the browser setup

If you need screenshots of the finished page for documentation, previews, or review, ScreenshotNeo provides a screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. The DIY Scrollify setup above remains the way to build the scrolling behavior; this is for capturing the result.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for parameters and setup. Cookie banners, newsletter popups, and chat widgets are removed before the shot, and those cleanup steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers indicate the page verdict and whether the shot was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, no card required.

9. Frequently asked questions

Can I use Scrollify with elements other than <section>?

Yes. The selector determines which elements act as panels; the HTML tag itself does not.

Does Scrollify support horizontal section scrolling?

No. The project FAQ describes vertical scrolling and says horizontal scrolling is not supported.

Can I turn Scrollify off on some layouts?

The project documents enable and disable controls. Use them when a responsive layout or content type is better served by ordinary scrolling, and verify behavior across the transition.

Does Scrollify automatically make a snapping page accessible?

The cited project sources do not establish that. Check keyboard access, focus, reduced motion, touch, zoom, and overflow behavior in your implementation.

References: Official Scrollify repository and README; Official Scrollify documentation and demo; jQuery Plugin Registry listing; jquery-scrollify 1.0.12 package metadata; Historical issue report #111.