The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →To make a website move between selected vertical sections, load jQuery and Scrollify, then initialize the plugin with a selector matching those sections. Scrollify is a jQuery plugin that assists scrolling and snaps to selected sections. This guide covers setup, configuration, navigation, content that overflows the viewport, and the behavior to test before shipping.
How do I make a website scroll one section at a time?
Load jQuery before the Scrollify script, then initialize it after the document is ready. The project documentation states that Scrollify requires jQuery 1.7 or newer. The example assumes both scripts are already loaded.
<div class="panel">First panel</div>
<div class="panel">Second panel</div>
<script>
$(function () {
$.scrollify({ section: ".panel" });
});
</script>In a real page, include the jQuery and Scrollify script files in that order before this initializer. The project documents installation through Bower and npm; check the exact package version and dependency requirements in your build environment rather than assuming every package record describes the same release. See the Scrollify repository and its project documentation and demo.
The selector does not have to target HTML <section> elements. It can match any elements on the page, so long as it selects the panels you intend Scrollify to manage.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Configure panels, names, and page behavior
Scrollify offers options for which elements count as panels, their names, spacing, animation, height, scrolling exceptions, touch behavior, and lifecycle callbacks. Consult the documentation for defaults and check how each option behaves with your page structure; behavior depends on the options you choose.
Control the panel selector and movement
sectionselects the elements Scrollify treats as panels.easingandscrollSpeedcontrol the transition animation.offsetadjusts the panel position.scrollbarscontrols the scrollbar behavior.setHeightsandoverflowScrollaffect panel sizing and content that exceeds the viewport.touchScrollcontrols the plugin’s touch-scrolling behavior.
Use only the options your page needs, and test combinations with actual content. In particular, the documentation warns that collapsed or improperly contained content can cause incorrect panel-height calculations.
Add named sections and URL fragments
To associate panels with readable names, configure sectionName and add the matching data attribute to each panel. With the documented default name, section-name, a panel might use data-section-name="about". Scrollify can update the URL hash as users move between panels, so a link can point to a named section. Avoid element IDs that conflict with the fragment names Scrollify generates.
Keep headers, footers, and scrollable regions outside the snap flow
Use interstitialSection for areas such as a header or footer that are not full-height panels. If an embedded map, frame, or other region needs ordinary scrolling, specify it with standardScrollElements to exempt it from the section behavior.
Rank #2
For panels with content taller than the viewport, overflowScroll allows scrolling within overflowing sections. This is an important trade-off: full-panel snapping and conventional scrolling inside long content can interact in ways that depend on layout and content height. Test long text, images, embeds, and dynamically expanded areas in the page itself.
Use the API for navigation and dynamic layouts
Scrollify documents methods to move to a panel by index or named hash, move to the next or previous panel, enable or disable the plugin, inspect the current panel and index, recalculate dimensions with update(), and remove event handlers and assigned heights with destroy(). These methods can support navigation buttons, responsive changes, or content that changes after initialization.
When content or layout changes, call update() if panel positions need recalculation. When changing modes or removing the behavior, use the documented enable/disable controls or destroy() as appropriate. Verify the method signatures against the version you installed, and test after resizing or modifying content rather than assuming the layout has updated.
Test accessibility, touch, and browser behavior
The project documentation describes touch handling and says Scrollify works well on mobile, but that is a project claim, not an independent device test or accessibility audit. Section snapping changes ordinary page movement, so test the actual experience before relying on it.
- Navigate with a keyboard and check that focus remains visible and moves in a sensible order.
- Test touch gestures on the devices and browsers your audience uses, including areas that need ordinary scrolling.
- Check browser back/forward behavior and direct links to URL fragments.
- Zoom the page and inspect panels whose content becomes taller than the viewport.
- Respect reduced-motion preferences where your implementation supports them; the documented controls include easing and speed, but the sources do not establish automatic reduced-motion handling.
- Test with the plugin disabled as well as enabled, so you know how the page behaves without snapping.
Choose deliberately between full-page snapping and continuous scrolling, fixed-height panels and overflowing content, hash updates and no URL changes, and enabling or disabling the plugin on touch devices. These are design decisions, not performance claims.
Check compatibility and maintenance before shipping
The Scrollify README says it requires jQuery 1.7 or newer and claims support for IE 8+, Chrome, Firefox, Opera, and Safari. The demo also states the jQuery 1.7+ requirement. Treat the browser list as the project’s published claim, not a guarantee for current browser releases.
Package records differ: the jQuery Plugin Registry lists version 0.1.3 dated June 29, 2014, with a jQuery ≥1.6 dependency, while UNPKG metadata for jquery-scrollify version 1.0.12 reports a jQuery ≥1.7 dependency. Those records refer to different entries and should not be combined into a claim about the current release. Check the installed package and test it with your actual jQuery version.
A historical GitHub issue reports a problem calling update() after resize when setHeights is false. It is a single old issue report, not proof of a current defect. If you use that configuration, reproduce the resize case with your exact package version and browser environment.
Rank #4
The available project, registry, and package sources do not establish current compatibility results, adoption, or performance benchmarks. Treat the listed requirements and features as documentation, then validate them on the site you plan to deploy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common setup and behavior problems
| Symptom | Likely cause | What to check |
|---|---|---|
| Nothing snaps between panels | The plugin or jQuery did not load, initialization ran too early, or the selector matches no panels. | Confirm jQuery loads before Scrollify, run initialization after DOM ready, and verify that each intended panel matches the configured selector. |
| The page jumps or panel positions are wrong | Panel heights may be miscalculated, especially with collapsed or improperly contained content. | Inspect the rendered layout, check panel containment and heights, then use the documented update() method after relevant layout changes. |
| A map, frame, or long content area will not scroll normally | The region is still being handled as part of the section-snap behavior, or overflow handling is not configured for the content. | Use standardScrollElements for regions needing ordinary scrolling and test overflowScroll for content taller than the viewport. |
| Named links or URL hashes do not match expected panels | The panel data attribute, sectionName configuration, or fragment name may not agree. |
Match the configured name to each panel’s data attribute and avoid IDs that conflict with generated fragment names. |
Resize behavior fails with setHeights: false |
A historical issue reports this case, but it does not establish a present-day failure. | Reproduce it using the exact version and browser in your project; do not assume the old report applies to your configuration. |
Or skip the browser setup
If you need screenshots of a page while developing or checking the finished result, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns an image or PDF, without requiring you to configure a browser capture script.
cURL example, targeting the Scrollify demo page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://projects.lukehaas.me/scrollify/ -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Frequently Asked Questions
Can Scrollify use elements other than the HTML section tag?
Yes. The selector can target any elements; they do not have to be <section> elements.
Does Scrollify support horizontal snapping?
No. The project FAQ describes vertical scrolling and says horizontal scrolling is not supported.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
