Page scroll to id for WordPress
Page scroll to id is a fully featured WordPress plugin for creating links that scroll the page smoothly to any id within the document. The plugin 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, link and target highlighting via ready-to-use CSS classes, vertical and/or horizontal scrolling, scrolling from/to different pages etc.
- Get started
- Basic tutorial (text)
- Basic tutorial (video)
- Plugin settings
- Plugin shortcodes
- Knowledge Base – FAQ
- Get/download plugin from WordPress repository
- Changelog
- Previous versions
Get started
The plugin works by “connecting” links with href/URL in the form of #my-id
or http://my-site.com/page/#my-id
to sections/elements within the document with an equivalent id attribute value (e.g. <div id="my-id">...</div>
). Clicking such links will scroll the page smoothly to their target id position.
Get started by creating or setting-up your links. The plugin is enabled by default on WordPress Menu links (created in Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to (e.g. #my-id
, /page/#my-id
, http://my-site.com/page/#my-id
etc.).
You can use id values that already exist in your theme or you can create your own id targets using plugin’s “Insert Page scroll to id target” button in wp post visual editor or the [ps2id]
shortcode (e.g. [ps2id id='my-id'/]
).
To create links within your content, use plugin’s “Insert/edit Page scroll to id link” button and/or shortcode (e.g. [ps2id url='#my-id']link text[/ps2id]
) in wp post visual/text editor.
To enable the plugin on existing links, add the ps2id
class or the m_PageScroll2id
rel attribute to them, making sure the link’s href/URL value contains a hash (#
) with the id of the section you want to scroll-to. In addition, you can simply add your links CSS selector (e.g. .menu-item a
, a[href*='#']:not([href='#'])
etc.) in “Selector(s)” field in plugin settings.
To highlight your links (or targets), use the classes provided by the plugin in your theme’s stylesheet or custom CSS. The default highlight class is mPS2id-highlight
but you can set your own in the “Classes & highlight options”. For example, to style the highlighted link (the link whose target element is considered to be within the viewport), you could add in your CSS:
a.mPS2id-highlight{ background: #ff0; }
or
.menu-item a.mPS2id-highlight{ background: #ff0; }
for highlighting custom menus links only.
If you have a fixed-positioned/sticky menu which overlaps your target’s content when page scrolling is completed, insert your menu CSS selector or a fixed pixel value in the “Offset” field. For example, inserting #navigation-menu
will offset the scroll-to position according to the height/width/position of the element with id navigation-menu
. In the same manner, setting the “Offset” value to 100
will offset page scrolling by 100 pixels.
Plugin settings
-
Selector(s)
- Use the Selector(s) field when you need to instruct the plugin to handle specific links. The value(s) should be anchor tags (
a
, i.e. links) in the form of strings that represent ways of choosing elements in the DOM (i.e. CSS selectors).
Each selector is separated by comma, so multiple selectors can be defined as:selector1, selector2, selector3
etc.The default selector value is
a[href*='#']:not([href='#'])
, meaning the plugin handles all links that have a valid hash value (e.g.#id
) in their URL.
The default selector value prior to version 1.6.3 of “Page scroll to id” isa[rel='m_PageScroll2id']
, meaning the plugin handles by default all anchor elements (a
) withm_PageScroll2id
rel attribute value.Other selector examples could be:
a[href*='#']
(links that contain#
in their href/URL attribute),a[href='#my-id']
(links with href attribute value:#my-id
),a.className
(links with class:className
).To enable the plugin on any link that has a hash (
#
) in its URL, inserta[href*='#']:not([href='#'])
as a single selector.Other default selectors which the plugin is applied automatically include the class
ps2id
(actual selectors:.ps2id > a[href*='#']
anda.ps2id[href*='#']
). This means that any link with a hash in its URL/href (e.g.#my-id
) which has the class or is contained (direct children) within an element with the classps2id
will be handled by the plugin automatically.To exclude specific links from being handled by the plugin (e.g. special tabs, accordions, toggles etc.), use the selectors are excluded field by adding the element selector(s) you want (separated by comma). The default excluded selectors value is set to:
a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link
which excludes most links that are used for toggling elements, tabs, accordions etc.You can add your owns electors to exclude by separating each one with comma (,), for example:
a[href^='#tab-'], a[data-toggle], a.some-class, .tabs a
The option “Enable on WordPress Menu links” (enabled by default) enables the plugin automatically on custom links created in WordPress Menus.
-
Scroll duration
- Scroll animation duration (i.e. scrolling speed) in milliseconds (1000 milliseconds equal 1 second). Lower values equal faster scrolling.
“Auto-adjust scrolling duration” option (enabled by default) lets the plugin fine-tune scrolling duration/speed according to target and page scroll position. This normalizes the animation duration in order to avoid short-distance scrolling taking too long (e.g. a page scroll of just 100 pixels will last shorter than the value specified in “Scroll duration”).
-
Scroll type/easing
- Scroll animation easing type (i.e. the way the animation progresses at different points within its duration).
You can set different easing types according to page scrolling state: one that is applied when the page is idle (no scrolling currently running) and another that applies while page is scrolling (when a link is clicked while the page is animated/scrolling).
Enable “Force scroll type/easing” option when there’s conflict with outdated easing libraries added by themes or other plugins.Scroll duration and easing demo
-
Scroll behavior
- Always scroll smoothly when reaching the end of the page/document option adjusts scroll-to position so it does not exceed document length. For example, when scrolling to a target element that is at the bottom of the page, the scrolling animation stops smoothly at bottom of the page instead of “breaking” at an earlier point.
Enable Stop page scrolling on mouse-wheel or touch-swipe option if you want to stop page scrolling when the user tries to scroll the page manually (e.g. via mouse-wheel or touch-swipe).
Enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option, will auto-correct scrolling if the target’s position was changed while the page was scrolling. This event will fire one time only after scrolling animation is complete. This option is useful when document’s length changes according to scroll (for example when a menu becomes sticky after scrolling down the page and its previous state space gets zero).
Enable “Extend target position verification and scrolling adjustment for lazy-load scripts (images, iframes etc.) and changes in document’s length” when dealing with lazy-loaded images and iframes, changes in document’s length etc.
-
Page layout
- Set page scrolling direction (i.e. restrict scrolling) to top-bottom (vertical) or left-right (horizontal) accordingly. For both vertical and horizontal scrolling select auto.
This option does not transform your theme’s templates layout (i.e. it won’t change your theme/page design from vertical to horizontal).
-
Offset
- Offset scroll-to position by x amount of pixels or by selector. The offset value can a be a positive or negative number (indicating pixels), or a matching set of elements in your html (selector). For example, setting the value to
50
will stop page scrolling 50 pixels before reaching the target.
If you need to offset scrolling according to the height (or width) of some element (e.g. according to a responsive/sticky navigation menu), insert the element’s selector in the Offset field. For example, if you have a top fixed/sticky menu with idnavigation-menu
, set the offset value to#navigation-menu
in order to stop page scrolling below it and avoid the menu overlapping your content.To set different vertical and horizontal offsets (e.g. when Layout is set to auto), add comma separated values in Offset field, e.g.
100,50
(vertical offset 100 pixels, horizontal offset 50 pixels).The plugin offers selector expressions in order to define more advanced offset values. Examples:
- :fixed and :sticky expressions – Offset by element with id “some-id” and CSS position fixed or sticky:
#some-id:fixed
or#some-id:sticky
Assuming vertical layout, the value above will offset scrolling according to the height of#some-id
element (i.e. the element that has idsome-id
), but only when this element CSS position is fixed or sticky (i.e. when element is sticks to the viewport when scrolling the page). This is useful when for example you have a navigation menu that is sticky/fixed only above a specific viewport size (e.g. only on desktop). - :height() expression – Offset by element with class “some-class” and height equal to 100 pixels:
.some-class:height(100)
The value above will offset scrolling according to the height (on vertical layout) of.some-class
element (i.e. the element that has classsome-class
), but only when this element height is exactly 100 pixels. - :width() expression – Offset by element with id “some-id” and width greater than 800 pixels:
#some-id:width(>800)
The value above will offset scrolling according to the height of#some-id
element, but only when this element width is greater than 800 pixels. This is useful when having responsive navigation menus. For instance, you might have a responsive top sticky menu that switches to a “hamburger” menu when viewport is 800 pixels wide or less. Assuming the menu is as wide as the page/viewport, you’d only want to apply its height as offset when its width is greater than 800 pixels (i.e. when it’s not “hamburger” menu). Adding:#your-menu-id:width(>800)
as the offset value will do exactly that. - Multiple expressions – Offset by element with id “some-id”, CSS position fixed and height between 50 and 100 pixels:
#some-id:fixed:height(>50):height(<100)
The value above will offset scrolling according to the height of#some-id
element, but only when this element CSS position is fixed and its height is anywhere between 51 and 99 pixels.
The plugin can generate automatically a hidden element that can be used as the offset selector. If you enable Auto-generate #ps2id-dummy-offset element option, you can use the
#ps2id-dummy-offset
as the “Offset” option value and then in your CSS by giving it a height equal to the amount of offset you want.For example, say you want to have an offset of 100 pixels on desktop and 50 pixels on smaller screens (i.e. mobile). You should enable the Auto-generate #ps2id-dummy-offset element option, set the value
#ps2id-dummy-offset
in the “Offset” option field and add the following to your CSS:#ps2id-dummy-offset{ height: 50px; } @media only screen and (min-width: 768px){ #ps2id-dummy-offset{ height: 100px; } }
- :fixed and :sticky expressions – Offset by element with id “some-id” and CSS position fixed or sticky:
-
Highlight selector(s)
- The matching set of elements (i.e. selectors) handled by the plugin, that will be eligible for highlighting. The value(s) should be anchor tags (
a
, i.e. links).The plugin highlights by default all the links it handles. Using this field, you can specify which links should be highlighted and exclude the rest.
For example, assuming you have various links that scroll the page (e.g. menu links, back-to-top etc.) and you want only the menu links to get highlighted, you could insert:
.menu-item a[href*='#']
-
Classes & highlight options
- The plugin adds special classes to the links and the target elements it handles when the following happen:
- When a link is clicked, it gets the
mPS2id-clicked
class.
You can change this class name to your own and you can use it in your CSS to style the clicked link. For instance:.mPS2id-clicked{ background: #ff0; }
- When a link’s target element is within the viewport (i.e. visible on the screen), the link gets the
mPS2id-highlight
class and the target element gets themPS2id-target
class.
You can change these class names to your own and you can use them in your CSS to style the highlighted link and target. For instance:.mPS2id-target{ background: #ff0; }
.mPS2id-highlight{ background: #ff0; }
In addition, the plugin will add the above highlight classes with the
-first
and-last
suffix (e.g.mPS2id-highlight-first
,mPS2id-highlight-last
) in order to differentiate multiple highlighted elements. This is useful when you need to style only the first or last of the highlighted links or targets in your CSS.
For example, if multiple links are highlighted at the same time, instead of using.mPS2id-highlight
in your stylesheet, you could do:.mPS2id-highlight-first{ background: #ff0; }
An alternative way of restricting highlight to a single link/target and prevent multiple elements from being highlighted at the same time, is to enable Allow only one highlighted element at a time.
There are times when you need to keep at least one element (e.g. a menu link) always highlighted. Enable Keep the current element highlighted until the next one comes into view option if you need such functionality/behavior and your template/page is laid out in a way that at certain scrolling points there are no target sections visible on the screen (no links highlighted).
Enable Highlight by next target option when your target elements have zero height/width to improve highlighting behavior. This option is useful when you add id targets in your content via plugin’s buttons or the
[ps2id id='some-id'/]
shortcode, as it extends the scrolling range at which an element stays highlighted. - When a link is clicked, it gets the
-
Links behavior
- If you want the link’s URL hash value (e.g.
#some-id
) to appear in browser’s address bar when it’s clicked, enable Append the clicked link’s hash value to browser’s URL/address bar option.The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded. If you want to delay page scrolling, use the delay for scrolling to target on page load field and enter how many milliseconds after the page is fully loaded, the scrolling will take place.
Enable different pages scrolling on all links option enables the above functionality on any link pointing to a target id on another page (even if those links are not handled by the plugin). In other words, entering a URL in the browser’s address bar in the form of
http://my-site.com/page/#my-id
, will always scroll the page smoothly to the#my-id
target (without the need for having such link in your page).If you’ve set link-specific offsets (e.g. via HTML
data-ps2id-offset
or shortcode’soffset
attributes) and want to use this value (instead of the general offset) when scrolling from/to different pages, enable Use element’s custom offset (if it exists) when scrolling from/to different pages option.When scrolling from/to different pages, the target’s id value is appended on the URL in browser’s address bar. This is the default browser behavior. If you want to remove this value from URL bar, enable Remove URL hash when scrolling from/to different pages.
-
Disable plugin below
- Set the viewport/screen-size in pixels, below which the plugin will be disabled. The value can be
width
orwidth,height
.
For example, insert1024
to disable plugin’s functionality when the viewport/window width is 1024 pixels or less. Insert1024,600
to disable plugin when viewport width is 1024 pixels or less and viewport height is 600 pixels or less.
Please note that the values entered will match CSS media queries.Leaving the field value empty or
0
(default) disables the option.
-
Administration
- Check Display widgets id attribute in order to show the id attribute of each widget in Appearance → Widgets. This is a convenient way of finding existing id values in order to use them as links targets.
You can also create your own id targets in widgets via the “Page scroll to id target” widget.Enable insert link/target buttons in post visual editor activates plugin’s buttons in WordPress visual editor toolbar. You can use these buttons to insert links and id targets in your content.
-
Advanced options
- If another plugin or a theme script handles page scrolling and conflicts with “Page scroll to id”, try enabling Prevent other scripts from handling plugin’s links option. This option attempts to remove (on-the-fly) javascript click events by other scripts from the links. Please note that this might not work on some themes or plugins, as it depends on the way those scripts are attaching the link events.
You may set a specific selector for the option above using the Prevent other scripts from handling plugin’s links selector(s) field (it’s recommended to set a specific selector when using the “Prevent other scripts from handling plugin’s links” option).Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.
Enable Encode unicode characters on links URL when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL (for proper highlighting of links).
-
wp-config options
define('PS2ID_MINIFIED_JS', false);
Use thePS2ID_MINIFIED_JS
constant (permanent global variable) in wp-config.php to select which script files will be loaded on the front-end by the plugin. Adding the above in wp-config.php instructs the plugin to load the non-minified/development version of its scripts.
Build pages visually on the front end of your website
You’ve never built a WordPress website like this before. Divi by elegant themes is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike, giving you the power to create spectacular designs with surprising ease and efficiency.
Learn more about Divi
Plugin shortcodes
Plugin’s [ps2id]
shortcode can be inserted directly in WordPress post editor (as with any WordPress shortcode) in order to create links and id targets in your content.
Link shortcode
[ps2id url='#some-id']link text[/ps2id]
Attributes
- url (required) – Link URL
Examples:
[ps2id url='#some-id']link text[/ps2id] [ps2id url='http://some-site.com/page/#some-id']link text[/ps2id] [ps2id url='/page/#some-id']link text[/ps2id]
- offset (optional) – Link-specific offset (bypasses the general offset value in plugin settings)
Examples:
Offset scrolling by 100 pixels
[ps2id url='#some-id' offset='100']link text[/ps2id]
Offset scrolling by the height (or width for horizontal layout) of the element with idnavigation-menu
[ps2id url='#some-id' offset='#navigation-menu']link text[/ps2id]
Offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels
[ps2id url='#some-id' offset='{"y":"100","x":"50"}']link text[/ps2id]
- class (optional) – Link custom class(es)
You can give the link one or more custom classes (separate multiple classes with space).
Examples:
[ps2id url='#some-id' class='class-a']link text[/ps2id] [ps2id url='#some-id' class='class-a class-b']link text[/ps2id]
You can change the scroll duration/speed of the link (bypass the general scroll duration value in plugin settings) by adding a special class in the form of
ps2id-speed-VALUE
(i.e.ps2id-speed-600
) withVALUE
indicating the scroll duration in milliseconds (lower duration equals faster scrolling).
Examples:
[ps2id url='#some-id' class='ps2id-speed-400']link text[/ps2id] [ps2id url='#some-id' class='ps2id-speed-1300 class-a class-b']link text[/ps2id]
- aria-label (optional) – Link aria-label attribute
Examples:
[ps2id url='#some-id' aria_label='Some text here']link text[/ps2id]
Target id shortcode
There are 2 target shortcodes:
[ps2id id='some-id'/]
[ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
You can use the wrapper target ([ps2id_wrap]
) when you need to wrap content in a target id (same as adding an id attribute to some content). Doing this gives you better control over the highlighting of associated links.
In addition, wrapper target allows you to include other shortcodes within its content, e.g.
[ps2id_wrap id='some-id'] content... [ps2id url='#another-id']link text[/ps2id] more content... [ps2id id='another-id'/] content... [/ps2id_wrap]
Attributes
- id (required) – Target id
Examples:
[ps2id id='some-id'/] [ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
- target (optional) – The element that’ll be considered as the actual target for highlighting
This can be useful when you need better highlighting for target elements that have zero dimensions.
Examples:
The associated link will scroll to#some-id
element but will be highlighted as if its target is the next adjacent div (the div immediately following#some-id
element)
[ps2id id='some-id' target='#some-id + div'/]
The associated link will scroll to#some-id
element but will be highlighted according to#another-id
element
[ps2id id='some-id' target='#another-id'/]
Previous versions
- 1.7.8
- 1.7.7
- 1.7.6
- 1.7.5
- 1.7.4
- 1.7.3
- 1.7.2
- 1.7.1
- 1.7.0
- 1.6.9
- 1.6.8
- 1.6.7
- 1.6.6
- 1.6.5
- 1.6.4
- 1.6.3
- 1.6.2
- 1.6.1
- 1.6.0
- 1.5.9
- 1.5.8
- 1.5.7
- 1.5.6
- 1.5.5
- 1.5.4
- 1.5.3
- 1.5.2
- 1.5.1
- 1.5.0
- 1.2
Development version: https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
Pages: 1 2
Hi there,
Your plugin is great thanks. BUT, on the main homepage it works great – https://anthonyw117.sg-host.com/, but if on a different page and you click on the main navigation menu it does not scroll to the correct place, it scrolls past the ID, for example if you click on any of the menu items on this page – https://anthonyw117.sg-host.com/faqs/
Any hints?
Thanks
Hello,
I can’t really reproduce the issue. Does this happen on specific browser(s)?
Try using plugin’s “delay for scrolling to target on page load” field by entering a value like
300
.You can also try enabling “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option.
Let me know
Thanks for your reply… can you please try this: go to homepage – https://anthonyw117.sg-host.com/ – then click on OUR STORY in main menu, then click on one of the posts, then click on any of the main menu items (not HOME), it loads up the home page again but then doesn’t stop at the correct place. It happens on Chrome and Safari for me. Thanks.
I made the “delay for scrolling to target on page load” 500 and it has fixed the problem! Thank you!
You’re welcome 🙂
Hello, i set up the delay enough long to read the title of the page, but i wanted to know if i can create a link ( back previous page ) with a different delay in the link ? to come back faster back in the id back?
Thank you
Hello,
There’s no way to add a different delay on a specific link. I don’t know exactly what you need but I’m guessing going back to some other id on a previous page (correct?) but unfortunately there’s no way to do this (at least not without developing a custom js script with a bit of PHP).
Hi mate,
I have installed your plugin on this website. Is it possible for the menu to automatically close on mobile devices when you click on an option?
The website is the below : https://e-aligners.gr/
Έλα φίλε μου,
Δες την απάντηση μου στο φόρουμ:
https://wordpress.org/support/topic/mobile-menu-263/#post-17860729
Hi
I am building a website that uses the html-anchor as an ID a CSS :target Selector.
I need your help to disable the jump to section feature so the user doesn’t get surprised when they click the button
The particular page in my website is board of directors page, when you click the image, a description text overlay appears using a fade transition.
My goal is to make the user comfortable and can see the description clearly.
The problem is because it uses the html anchor, it jumps to the section thus making jerky and sudden movements that made the user uncomfortable
I have tried to exclude the id, but still it jumps to the section
Do you have any advice or solution?
Thank you
Worm regards,
Erdafa Andikri
Hello,
I’d need to see your site/page in order to help. Can you post or send me the URL?
unfortunately i cant give you the url because the website is still at my localhost.
i will give you a youtube video that give you an understanding of my problem
https://youtu.be/abF2PiWG9Es
Have you activated “Page scroll to id” plugin? Is the “+” button an actual link with an
href
value?yes i already turned it on.
to be clear, i want to disable it.
i dont want it to jump to section.
I don’t think it’s possible to stop a link from jumping to its hash (you can test this by deactivating the plugin and see that it still jumps to the hash target), unless you add custom javascript. This is because jumping to hash is a standard browser behavior.
The thing is that unless I see your page/code I cannot provide what js code to add. At the very least you’ll need to tell me the class(es) of the “+” element (and its parent element) and maybe we can try adding some code.
Keep in mind that adding the code might still not work as it’ll depend on how your theme devs created the button functionality.
By the way, what clicking the “+” button supposed to do?
https://youtu.be/TfhuK0y9Hmw
clicking the + button shows the description of the member, i used css to achieve this
i think our conversation ends here, i will try to figure it out myself.
really appericiate your help
thank you,
Erdafa Andikri
No problem 🙂 Let me know if I can help.