Description
Page scroll to id is a fully featured plugin which replaces browser’s âjumpingâ behavior with a smooth scrolling animation, when links with href value containing # are clicked. It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like:
- Adjustable scrolling animation duration and easing (over 30 easing types)
- Link and target highlighting via ready-to-use CSS classes
- Vertical and/or horizontal scrolling
- Scrolling from/to different pages (scrolling to target id on page load)
- Offset scrolling by pixels or element selector with custom expressions
- Insert link and target id buttons in post visual editor
- Link-specific offset, scrolling duration, highlight target etc.
Demo (default animation duration/easing, link highlighting etc.)
Plugin resources, links and tutorials
Requirements
Page scroll to id requires WordPress version 3.3 or higher (jQuery version 1.7.0 or higher) and your theme must (and should) have wp_head()
and wp_footer()
functions. In some Microsoft Windows based web servers some plugins might produce an error 500 (depends on server/PHP configuration). To pinpoint the issue enable debugging in wp-config.php
and check wp-content/debug.log
file for relevant errors.
GDPR (General Data Protection Regulation)
The plugin is GDPR compliant. It does not use or store any kind of user information/data. In fact, it’s functionality has nothing to do with user data (personal or otherwise). So there’s that.
Quick usage and tips
- Install the plugin.
- The plugin is enabled by default on your WordPress Menu links, so you can start adding custom links and set their URL to the id/target you want to scroll to.
- Create id targets within your content using plugin’s âInsert Page scroll to id targetâ button and/or shortcode (see contextual âHelpâ menu in plugin settings page) in post visual/text editor. Create targets in widgets areas using âPage scroll to id targetâ widget.
- Create links within your content using plugin’s âInsert/edit Page scroll to id linkâ button and/or shortcode in post visual/text editor. You can also add the class
ps2id
on any existing link you want to be handled by the plugin.
For more info see plugin’s basic tutorial
License
MIT
You should have received a copy of the MIT License along with this program.
If not, see http://opensource.org/licenses/MIT.
Donate
If you like this plugin and find it useful, consider making a donation :).
Plugin previous/other versions
Other/external resources
- How to create anchor links on WordPress Gutenberg editor
- Using Page scroll to id with the Divi Builder plugin
- One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017
- Smooth scrolling between page sections using Page scroll to id
- Video tutorial: How to create a single page WordPress website
- GeneratePress – Elementor – Page Scroll to ID – One Page Website
- Onepage WordPress – Page scroll to iD plugin
Screenshots
Blocks
This plugin provides 2 blocks.
- Page scroll to id target
- Ps Id Blocks
Installation
Automatic
- Click âAdd Newâ under âPluginsâ menu in WordPress.
- Perform a search for the term âPage scroll to idâ and in search results, click âInstall/Install Nowâ under plugin name.
- When installation is finished, click âActivate Pluginâ.
Manual
- Download and extract the plugin.
- Upload the entire
page-scroll-to-id
folder to/wp-content/plugins/
directory. - Activate the plugin through the âPluginsâ menu in WordPress.
Configuration
Configure plugin options by clicking âSettingsâ under plugin name or through the âSettingsâ menu in WordPress administration.
FAQ
Please visit plugin’s Knowledge Base – FAQ for up-to-date info and guides.
-
Is it GDPR compliant?
-
Yes.
-
Why it hasn’t been updated for x weeks/months?
-
Because it works and it already has a ton of features. The plugin has little dependency on WordPress functions so it doesn’t need to be updated every time WordPress updates (that’s why it works on ancient WordPress versions like 3.3).
Reviews
Contributors & Developers
“Page scroll to id” is open source software. The following people have contributed to this plugin.
Contributors“Page scroll to id” has been translated into 11 locales. Thank you to the translators for their contributions.
Translate “Page scroll to id” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.7.9
- Fixed various PHP 8 warnings.
- Changed plugin shortcodes files to adhere to wp coding standards.
1.7.8
- Added aria-label attribute in plugin shortcodes (requires PHP v5.3 or greater).
- Changed plugin shortcodes markup to remove empty attributes.
- Fixed PHP warning (Array to string conversion) in PHP 8 installations – related issue.
- Fixed issue with text formatting in plugin admin page – related issue.
- Modified various plugin files to comply with the WordPress Coding Standards.
- Fixed an issue with shortcodes not working in WordPress 2022 theme editor.
- Created the special class âps2id-auto-scrollâ to easily auto-scroll to a target id with this specific class on page load.
1.7.7
- Changed a couple of plugin functions in order to comply with the WordPress Coding Standards.
1.7.6
- Fixed various PHP notices and warnings.
- Extended unbind unrelated click events extra/deferred script.
- Patched vulnerability in plugin’s shortcode.
1.7.5
- Fixed various PHP 7.4 and PHP 8 notices and warnings appearing on plugin installation.
- Fixed a minor javascript expression issue.
- Fixed PHP warning with old PHP versions (5.2 and 5.3).
1.7.4
- Added link-specific offset special class (ps2id-offset-NUMBER) for WordPress Menu items. For example adding the class ps2id-offset-150 to a menu item, will give the link an offset of 150.
- Extended plugin’s offset selector expressions with the :sticky selector.
1.7.3
- Fixed issue with target id attribute having special characters (like %, &, # etc.).
- Extended âPrevent other scripts from handling pluginâs linksâ option with special selector option field.
- Removed jQuery 1.x deprecated functions from plugin script (.bind, .delegate, .unbind etc. are replaced with .on, .off etc.).
- Updated plugin’s contextual help and notices.
1.7.2
- Added an extended âVerify target position and readjust scrollingâ option for lazy-load images, iframes, changes in document’s length etc.
- Added âForce scroll type/easingâ option for dealing with conflicts with outdated easing libraries added by themes or other plugins.
- Updated plugin’s settings page, contextual help and notices.
1.7.1
- Update plugin’s settings page and notices.
1.7.0
- Removed recommended plugins.
- Updated plugin screenshots.
- Updated readme.txt
1.6.9
- Added warning message in plugin settings when the selector option value lacks quotes (invalid without jquery migrate or with jquery 3.x).
- Fixed Uncaught TypeError of undefined data when actual page is inside an iframe – related issue.
- Added âEncode unicode characters on links URLâ option in plugin settings help panel.
- Extended âPrevent other scripts from handling pluginâs linksâ option function handler.
- Replaced jQuery deprecated ready event in plugin script.
1.6.8
- Fixed PHP notice/warning regarding contextual_help being deprecated (https://wordpress.org/support/topic/deprecated-contextual_help-is-obsolete-since-version-3-3-0/).
- Added new option âEncode unicode characters on links URLâ. This option can be used when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL.
- Added support for dynamic/live selectors for newer jQuery versions (3.x) and the upcoming WordPress 5.6.
1.6.7
- Fixed issue with links having meta characters (e.g. %) in URL.
- Extended the default excluded selectors.
- Fixed issue with TwentyTwenty theme smooth scrolling feature (https://wordpress.org/support/topic/scrolling-not-working-5/)
- New feature for developers: add plugin options manually (via js) to overwrite the ones in plugin settings.
1.6.6
- Fixed dynamic elements would not work automatically (issue in 1.6.5).
- Fixed some links would not get highlighted when using full URLs (issue in 1.6.5).
1.6.5
- Added new option to exclude specific selectors from being handled by the plugin.
- Added new option âAuto-generate #ps2id-dummy-offset elementâ.
- Added âPage scroll to id targetâ block for Gutenberg block editor.
- Added new feature for Gutenberg block editor:
- Fixed highlight not working in URLs with an apostrophe.
- Fixed this issue regarding plugin’s default selector when using non-WordPress jQuery library.
- Fixed this minor issue.
- Fixed multisite issue where few plugin options would not save/update properly.
- Fixed issue #10
- Updated plugin’s contextual help and documentation.
1.6.4
- Fixed a minor bug affecting the âPrevent other scripts from handling plugin’s linksâ option.
1.6.3
- Fixed a bug which was breaking page scrolling in some WordPress themes/installations in version 1.6.2.
- Fixed a bug regarding links with URL in non-latin characters (e.g. Greek, Cyrillic etc.).
- Better plugin version control for multisite installations.
- Fixed PHP 7 notices and warnings.
- Plugin is now enabled by default on all links with a non-empty hash value (e.g. #some-id) in their URL.
- Changed default scroll duration from 1000 to 800 milliseconds.
- Added support for anchors inside SVG elements.
- Added new option âVerify target position and readjust scrolling if necessaryâ.
- Added new option âUse element custom offset when scrolling from/to different pagesâ.
- Added new option âRemove URL hash when scrolling from/to different pagesâ.
1.6.2
- Changed default options for scroll duration and easing type. Plugin is now enabled by default on WordPress menu items/links. These changes affect only first-time installations (upgrading won’t change these options).
- Extended plugin’s settings page and renamed few options to less technical terms.
- Added special class/option for creating links with alternative scroll duration/speed.
- Extended plugin buttons on WordPress visual editor (non-shortcode links, custom classes etc.).
- Added new option âAppend the clicked linkâs hash value to browserâs URL/address barâ.
- Added new option âStop page scrolling on mouse-wheel or touch-swipeâ.
- Added new option âPrevent other scripts from handling pluginâs linksâ.
- Added new option âNormalize anchor-point targetsâ.
- Relative-root links are now properly highlighted.
- Added
wp-config.php
option for selecting which script files the plugin loads (minified or uncompressed). - Only necessary CDATA values are passed on the front-end script.
- Added compatibility for latest non-WordPress jQuery versions (2.x and 3.x).
- Fixed a bug regarding shortcode’s offset attribute when used with âautoâ layout.
- Fixed a php notice when updating plugin from version 1.6.0.
- Added workaround for IE/Edge not starting from the top when scrolling to hash on page load.
- Updated readme.txt, contextual help and documentation.
1.6.1
- Added additional default selectors:
.ps2id > a[href*='#'],a.ps2id[href*='#']
. - Added âPage scroll to id targetâ widget.
- Added custom buttons in WordPress visual editor for plugin’s shortcodes insertion.
- Added new option âEnable on WordPress Menu linksâ in plugin settings.
- Fixed browser’s history back button when âScroll to location hashâ option is enabled.
- Updated readme.txt.
- Extended help and documentation.
1.6.0
- Fixed contextual help shortcut links in plugin settings page.
- Added new option âEnable for all targetsâ for âScroll to location hashâ.
- Added new option âDelayâ for âScroll to location hashâ.
- Fixed an issue regarding invalid selectors with location hash.
- Updated readme.txt.
- Updated help.
1.5.9
- Extended
ps2id
shortcode for creatingdiv
elements (in addition to anchors). - Added
ps2id_wrap
shortcode for creating target wrappers in content editor. - Extended offset selector expressions with
:position
,:height()
and:width()
. - Updated readme.txt.
- Updated help.
1.5.8
- Fixed various PHP notices in debug mode.
- Minor script optimizations.
1.5.7
- Added âHighlight by next targetâ option. When enabled, highlight elements according to their target and next target position (useful when targets have zero dimensions).
- Extended
ps2id
shortcode for creating targets in content editor.
1.5.6
- Changed the way âForce single highlightâ option works. When enabled, it now highlights the first highlighted element instead of last.
- Extended highlight and target classes with additional ones in order to differentiate the first and last elements. You can now use
.mPS2id-highlight-first
,.mPS2id-highlight-last
,.mPS2id-target-first
and.mPS2id-target-last
in order to target the first and last highlighted links and targets in your CSS. - Added âKeep highlight until nextâ option. When enabled, the plugin will keep the current link/target highlighted until the next one comes into view (one element always stays highlighted).
- Added âDisable plugin below screen-sizeâ option. Set the screen-size (in pixels), below which the plugin will be disabled.
1.5.5
- Fixed contextual help links in plugin settings page.
- Updated Offset field to accept comma separated values for defining different offsets for vertical and horizontal layout (e.g.
100,50
). - Added âScroll to location hashâ option. When enabled, the plugin will scroll to target id (e.g.
<div id="id" />
) based on location hash (e.g.mysite.com/mypage#id
) on page load. - Updated readme.txt.
- Updated help.
1.5.4
- Fixed a minor bug in jquery.malihu.PageScroll2id-init.js.
- Updated screenshots.
- Updated readme.txt.
1.5.3
- Extended Offset option to accept element selectors in addition to fixed pixels values.
- Added
ps2id
shortcode for creating links in content editor. - Added the ability to define link specific offsets via the html data attribute:
data-ps2id-offset
. - Fixed some minor issues for WordPress versions lower than 3.5.
- Updated help and external links.
- Changed plugin license from LGPL to MIT.
1.5.2
- Minor code tweaks.
1.5.1
- Minor code tweaks.
- Minified scripts.
1.5.0
- Dropped jQuery UI dependency (jQuery UI is no longer required for the plugin to work).
- Fixed the bug of non-working links to other pages. The script now checks if href values refer to the parent document, before preventing the default behavior.
- Fixed the bug regarding selectors referencing body class not working.
- Any link handled by the plugin with href value
#top
will now scroll the page to top, if no element with idtop
exists. - Added links highlighting feature. The script adds a class (default:
mPS2id-highlight
) automatically on links whose target elements are considered to be within the viewport. - Plugin adds a class (default:
mPS2id-target
) automatically on targets that are considered to be within the viewport. - Plugin adds a class (default:
mPS2id-clicked
) automatically on the link that has been clicked. - Added
offset
option: Offsets scroll-to position by x amount of pixels (positive or negative). - The plugin script now fully validates href values and ids before scrolling the page.
- Fixed varius minor bugs.
- Code rewritten and optimized for better performance and maintenance.
- For more see Plugin changelog.
1.2.0
- Added support for jQuery version 1.9.
1.1.0
- Removed the hard-coded plugin directory URL in order to fix errors of pointing .js files to a wrong location.
1.0.0
- Launch!