Arts Smooth Scrolling for Elementor
| 开发者 | artemsemkin |
|---|---|
| 更新时间 | 2026年8月18日 22:39 |
| PHP版本: | 8.0 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv3 |
| 版权网址: | 版权信息 |
详情介绍:
- Momentum scrolling. The page scrolls through Lenis instead of the browser's native scroll, with a duration and easing curve set from Site Settings.
- Anchor links. Clicking a same-page
#anchorlink (or a bare#) scrolls smoothly to the target, using a slightly snappier easing than the main scroll. - GSAP ScrollTrigger sync. If GSAP and ScrollTrigger are already on the page, the engine detects them, drives its render loop off GSAP's ticker instead of a separate animation-frame loop, and keeps ScrollTrigger's cached scroll position current on every frame.
- Disable on touch devices. On by default: phones and tablets never download the engine, since there's no pointer-driven scrolling to smooth there.
安装:
- Install and activate Elementor (the free version is fine).
- Install and activate Arts Smooth Scrolling for Elementor.
- Browse your site. Smooth scrolling is already running. To tune duration and easing, open Elementor's Site Settings and find the Smooth Scrolling tab.
屏幕截图:
常见问题:
How do I access the Lenis instance from JavaScript?
window.artsSmoothScrolling.ready is a promise that resolves once the engine has started. window.artsSmoothScrolling.lenis is a getter for the live Lenis instance, null while the engine isn't running.
Does it work with GSAP and ScrollTrigger?
Yes, automatically. If window.gsap is present, the engine drives Lenis off GSAP's ticker (added with priority, so it runs ahead of GSAP's own tweens) instead of its own animation-frame loop, and calls gsap.ticker.lagSmoothing(0) once — the standard recipe for pairing GSAP with a smooth-scroll library. That call changes a global GSAP setting and is not reverted if smooth scrolling is later disabled.
What happens when I click a link like /#pricing on a page that isn't the homepage?
It navigates to the homepage and then scrolls to the pricing anchor there — the same thing that link does in any browser without this plugin. There's no trailing-slash normalization in the same-page check, so a link is only treated as pointing at the current page when its URL matches exactly.
Does it affect Elementor's Sticky elements?
Elementor's Sticky effect has its own "Anchor Offset" (sticky_anchor_link_offset) setting for compensating anchor-link scroll targets under a sticky header. That offset isn't applied while smooth scrolling is active, since anchor scrolling then goes through Lenis rather than Elementor's native scroll handling.
Does it load anything on touch devices?
Not when Disable on Touch Devices is on, which is the default. The inline loader checks a media query before ever requesting the engine bundle, so phones and tablets download nothing.
How do I turn it off?
Deactivate the plugin, or for conditional control use the arts_smooth_scrolling/enabled PHP filter.
Does it work with AJAX page-transition plugins (Barba.js-based themes, etc.)?
Not certified yet with 1.0.0. The engine is designed to persist across such transitions rather than re-initialize on every page swap, but this hasn't been tested against specific transitions plugins. If you run into issues, please report them.
更新日志:
- improved: confirmed compatibility with WordPress 7.1.