Page scroll to id

Last updated on Feb 26, 2021 Originally published on January 3, 2014 by malihu, under Plugins, WordPress.

Changelog

Feb 26, 2021
- Page scroll to id version 1.6.8 release
- Removed jQuery 1.x deprecated functions from plugin script (.bind, .delegate, .unbind etc. are replaced with .on, .off etc.).
Feb 10, 2021
- Page scroll to id version 1.6.7 release
- Added inIframe option parameter.
Jan 31, 2021
- Page scroll to id version 1.6.6 release
- Fixed issue with special characters in id attribute.
Aug 16, 2020
- Page scroll to id version 1.6.5 release
- Fixed Uncaught TypeError of undefined data (e.g. when inside an iframe).
Jun 17, 2020
- Page scroll to id version 1.6.4 release
- Fixed issue with links having encoded unicode characters (e.g. on internationalized domain names) in their href/URL.
Oct 1, 2019
- Page scroll to id version 1.6.3 release
- Fixed issue with links having meta characters (e.g. %) in URLs.
May 29, 2019
- Page scroll to id version 1.6.2 release
- Fixed links with full url not highlighting (introduced in previous version).
- Fixed links with non-latin characters in url not highlighting.
May 27, 2019
- Page scroll to id version 1.6.1 release
- Fixed dynamic (live) elements issue introduced in previous version. Added excludeSelectors option parameter.
May 1, 2019
- Page scroll to id version 1.6.0 release
- Fixed highlight not working in URLs with an apostrophe.
Oct 1, 2018
- Page scroll to id version 1.5.9 release
- Plugin now works with anchors inside SVG elements.
May 31, 2017
- Page scroll to id version 1.5.8 release
- Fixed a bug regarding links with URL in non-latin characters (e.g. Greek, Cyrillic etc.).
Feb 8, 2017
- Page scroll to id version 1.5.7 release
- Fixed a bug regarding ps2id-speed-VALUE class.
Jan 10, 2017
- Page scroll to id version 1.5.6 release
- Changed required jQuery version to 1.7.
- Added appendHash option parameter.
- Fixed non-highlighted links with relative-root href values.
- Added link-specific scrollSpeed value via the ps2id-speed-VALUE class (with VALUE indicating animation duration in milliseconds).
- Changed scrollSpeed, scrollEasing and scrollingEasing default values.
Aug 3, 2016
- Page scroll to id version 1.5.5 release
- Added support for jQuery version 3.
- Added liveSelector option parameter.
Oct 7, 2014
- Page scroll to id version 1.5.4 release
- Minor code optimizations regarding jQuery selector property.
Sep 17, 2014
- Page scroll to id version 1.5.3 release
- Added highlightByNextTarget option parameter, which enables defining targets by their position.
- Added the ability to define targets via the html data attribute: data-ps2id-target.
- Enabled proper highlighting for dynamic elements.
May 19, 2014
- Page scroll to id version 1.5.2 release
- forceSingleHighlight option parameter 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: mPS2id-highlight-first mPS2id-highlight-last mPS2id-target-first mPS2id-target-last.
- Added keepHighlightUntilNext option: Keeps element highlighted until next (one element always stays highlighted).
- Added disablePluginBelow option: Disables plugin below [width,height] screen size.
Jan 15, 2014
- Page scroll to id version 1.5.1 release
- Extended offset option to accept element selectors (as string), js/jquery objects, arrays and functions.
- Added the ability to define link specific offsets via the html data attribute: data-ps2id-offset.
- Changed plugin license from LGPL to MIT.
Jan 3, 2014
- Page scroll to id version 1.5.0 release
- Dropped jQuery UI dependency (jQuery UI is no longer required for the plugin to work).
- Added scrollTo method: Scrolls the page to a given id (defined in the function parameter) programmatically.
- 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 id top 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).
- Added clickEvents option: Enables/disables click events for all selectors.
- Added 2 user defined callback functions: onStart (triggers when scrolling animation begins) and onComplete (triggers when scrolling animation is completed).
- 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.
Feb 9, 2013
- Page scroll to id version 1.2.0 release
- Added support for jQuery version 1.9.
Sep 3, 2012
- Page scroll to id version 1.1.0 release
- Removed the hard-coded plugin directory URL from WordPress plugin file, in order to fix errors of pointing .js files to a wrong location.
Jun 4, 2012
- Page scroll to id for WordPress release
May 31, 2012
- Page scroll to id version 1.0.0 release

Plugin home Project on GitHub

Pages: 1 2 3 4

633 Comments

Post a comment

Comments pages: Previous 1 … 6 7 8

Steven
Posted on August 6, 2023 at 00:52 Permalink

Hello –

Still loving this plugin. One quick question – is there a way to exclude a specific anchor link? I read in another thread to add an exclusion (see below) but the code below didn’t do the trick.

a[href$=’#sampleexercises’]

The anchor link is accessed from a different page and creates a choppy experience where the user is taken to the anchor link, then to the top, then has a smooth scroll down. Would ideally just get rid of the smooth scroll for this one particular link.

Thanks!
Reply
- malihu
  Posted on August 6, 2023 at 16:01 Permalink
  
  Hello,
  
  Are you using the WordPress plugin? If yes, you probably need to disable the “Enable different pages scrolling on all links” option in plugin settings. Let me know.
  Reply
James
Posted on July 27, 2023 at 15:12 Permalink

Hi Manos

I have used your script successfully on a few occasions thank you!

I think I may have asked this question before – apologies if I have.

Can I set the plugin to smooth scroll automatically to an id (with offset) a few seconds after a page has loaded (without the user having to click on a link)?

Thanks again
Reply
- James
  Posted on July 27, 2023 at 15:22 Permalink
  
  Hi again – I have just found your earlier reply from 2020 – so no need to reply again – unless something has changed in your latest version.
  
  Thanks again 🙂
  Reply
mmdwc
Posted on July 20, 2023 at 13:13 Permalink

hello,

is it possible to use this plugin to scroll inside a container?
let me explain, my scrollable div(content-ajax) is inside a div (wrapper), therefore the scroll to id function doesn’t work since it’s the body element that gets animated by the script…

#wrapper { width: 100%; height: 100vh; overflow: scroll; } #content-ajax {}

Is there a workaround?

thanks
Reply
- malihu
  Posted on July 20, 2023 at 15:17 Permalink
  
  Unfortunately, no. The plugin works strictly on the root element (html/body).
  Reply
Shwetha
Posted on July 15, 2023 at 07:26 Permalink

Hi, can anyone please help me fixing the issue. I have a website https://maithrinet.healthyhomefood.com/ with the 5 menus (Home, About, Solutions, Services, Contact Us) on the header. On clicking Solutions, Services and contact Us links, the page scrolls to the particular sections on the Home page and when the page scrolls the header gets stick on the top. The problem is on menu click the complete section is not visible properly as the section hides behind the sticky header partially. How can i make the page scroll to the exact location and not hide any content behind the sticky header. I have used page scroll to id and Sticky Header Effects for Elementor plugins to achive the effects.
Reply
- malihu
  Posted on July 17, 2023 at 02:45 Permalink
  
  Hello Shwetha,
  
  I just checked your site. You need to utilize the offset option in plugin settings to offset the scrolling according to your sticky header. The best way to do this is to use your sticky header element selector.
  
  Just go to “Page scroll to id” settings and set the “Offset” option value to:
  
  .she-header-yes
  
  Click save changes and test your page links 😉
  
  Let me know if it works.
  Reply
  - Shwetha
    Posted on July 18, 2023 at 12:28 Permalink
    
    Hey Manos,
    
    Thanks a lot for fixing the issue.
    Reply
Murali
Posted on May 27, 2023 at 10:20 Permalink

if am in about page here i clicked button its going to home page #section, For this #section need to add class using my custom script or ?
Reply
- malihu
  Posted on May 27, 2023 at 16:34 Permalink
  
  Please post your page URL so I can check it.
  Reply
kuba
Posted on May 25, 2023 at 18:10 Permalink

Hi I thing im stuck a little

Without this class

.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
}

All my menu items behave like clicked links and have a color #767676;

When i add
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
}

they have #222; color no matter what.

and my end gol is if the menu is untouch the colour shuld be #222; on mouse click and realase it should be #222; but on hover mouse i would like to hane #767676;.

I do something wrong clearly.

oh

I have no idea how to force slow scroll after clicking home menu buton.
no matter I use custom link or default menu option which is site, back to top on home is instant not floating smooth.

Have a great day. Thank you in advance.

Sorry for my crappy english
Reply
- malihu
  Posted on May 26, 2023 at 19:53 Permalink
  
  Hi,
  
  You need to exclude the :hover and optionally the .mPS2id-highlight selectors in your CSS. There’s also an error in your second selector as there seems to be a space between a and .mPS2id-highlight. So, change your CSS to:
  
  .navigation-top .current-menu-item > a:not(:hover), .navigation-top .current_page_item > a:not(:hover){ color: #222; }
  
  If you also want to have the #767676 color on the highlighted links while scrolling the page, change the CSS to:
  
  .navigation-top .current-menu-item > a:not(:hover):not(.mPS2id-highlight), .navigation-top .current_page_item > a:not(:hover):not(.mPS2id-highlight){ color: #222; }
  
  For the “Home” link, make it a custom link and set its URL to:
  
  https://sopot-homeyapartment.pl/#top
  
  Let me know if everything it works 🙂
  Reply
Julie Williams
Posted on April 29, 2023 at 17:15 Permalink

Thank you so much for the outstanding information. It means a lot for me 🙂
Reply
Detlef Könnecker
Posted on January 25, 2023 at 18:52 Permalink

Hello, the following error shows up in the admin area

Array to string conversion –> wp-includes/pluggable.php:2279 –> Plugin: page-scroll-to-id

Is there a workaround?
have a good day
Reply
- malihu
  Posted on January 29, 2023 at 03:45 Permalink
  
  Hello,
  
  This is a known issue which will be fixed in the next plugin version (1.7.8). If you don’t want to wait, you can download the development version from the link below and use it replacing the current plugin version you have:
  
  https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
  
  You can keep using the development version and update to version 1.7.8 when it becomes available, as you normally do.
  
  Let me know if you need more help.
  Reply

Comments pages: Previous 1 … 6 7 8

Page scroll to id

Changelog

Tags

Posts related to this article

633 Comments

Post a comment