This website uses cookies to personalise ads and to analyse traffic ok
web design

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

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[rel='m_PageScroll2id'], meaning the plugin handles by default all anchor elements (a) with m_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, insert a[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*='#'] and a.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 class ps2id will be handled by the plugin automatically.

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).

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).

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 id navigation-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 expression – Offset by element with id “some-id” and CSS position fixed: #some-id:fixed
    Assuming vertical layout, the value above will offset scrolling according to the height of #some-id element (i.e. the element that has id some-id), but only when this element CSS position is fixed (i.e. element is sticky). 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 class some-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.

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 the mPS2id-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; }
    a.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:
a.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.

Disable plugin below

Set the viewport/screen-size in pixels, below which the plugin will be disabled. The value can be width or width,height.
For example, insert 1024 to disable plugin’s functionality when the viewport/window width is 1024 pixels or less. Insert 1024,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.

Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.

wp-config options

define('PS2ID_MINIFIED_JS', false);
Use the PS2ID_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.

Divi WordPress Theme Monarch Social Sharing Plugin

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.

[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 id navigation-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) with VALUE 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]
    

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

[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

Development version: https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

Pages: 1 2


182 Comments

Post a comment

Comments pages: 1 2

  1. Megan
    Posted on November 15, 2017 at 19:44 Permalink

    Hello!

    This plugin is great and has worked well so far. I just have one issue. All of my menu links scroll properly and smoothly, except one. I have made sure the URL and ID’s are consistent with the working links but am not sure what the problem is. Thanks for your help!

    Megan

    Reply
    • malihu
      Posted on November 15, 2017 at 22:51 Permalink

      Hello,

      I cannot help unless I see your page. Can you post your site URL?

      Reply
  2. Sam
    Posted on November 15, 2017 at 13:32 Permalink

    Hi there,

    when I refresh the page, how can I stop it from re-scrolling to the Section ID?

    Reply
  3. Anna
    Posted on November 4, 2017 at 23:32 Permalink

    Hi, thank you for the plugin, but i have a problem on mobile with him. When you click on the blue button near the baby in blue suite it’s work just on desktop, not in mobile. How i can resolve it?

    Reply
    • Anna
      Posted on November 4, 2017 at 23:39 Permalink

      As soon as I wrote to you – I understood the problem. Sorry and thank you again!

      Reply
  4. Tom
    Posted on October 31, 2017 at 09:28 Permalink

    Great plugin!

    I have a problem with it.
    the mose left menu link (צור-קשר),
    is set to scroll to the footer contact form.

    And it is scrolling, but the scroll is’nt smooth at all.
    it is stuck and looking like a bug.

    Can you please help me figure it out?
    http://www.mayoga.co.il

    Reply
    • malihu
      Posted on October 31, 2017 at 18:41 Permalink

      Your link is not handled by “Page scroll to id”. It’s handled by another script in your theme (at line 703 of your index).

      You should remove this script (probably by editing your theme’s footer.php) and then enable “Page scroll to id” on your links following this guide (this is needed because your theme prevents “Page scroll to id” from being auto-enabled on the menu links).

      Reply
      • tom
        Posted on November 5, 2017 at 13:46 Permalink

        Thanks!

        I actually had another scroll plugin installed i didn’t see.

        I have just deleted it and it works!

        🙂

        Reply
  5. Geert
    Posted on October 23, 2017 at 15:46 Permalink

    Hi, I tried your page scroll to ID plugin and it works great so far. The only thing I can’t figure out (and can’t fina elsewhere) is the possibility to get this plugin to work for my homepage. What I hope it could do is this: my theme gives me the option to place the header/primary menu right below a silder revolution slider. Now I would like the browser to jump straight to the header/primary menu id when a visitor visits my website. So the visitor does not see this slider in the first place, only after the visitor scrolls up after pageload. That way I will have a sort of hidden slider on top of the menu that works as an easter egg. I managed to get this working, but a visitor needs to add the id at the end of the url and of course my visitor will just type in the straight url without that. Is there a way to get this working? Thanks you for your reply!

    Reply
    • malihu
      Posted on October 23, 2017 at 18:44 Permalink

      Hi,

      You can do this with javascript. Can you add some js code in your theme?
      If yes, something like the following would do what you need:

      (function($){ $(window).on("load",function(){ if(!window.location.hash){ //if URL has no hash (i.e. an id at the end of the URL), scroll to header $.mPageScroll2id("scrollTo","#your-header-id"); } }); })(jQuery);

      Add the above in a script tag in your template (e.g. footer.php), in some .js file or in a custom javascript field provided by your theme.

      The scrollTo method is provided by the plugin. You can set few of its options if you want (e.g. offset) – see more info here.

      Reply
      • Geert
        Posted on October 24, 2017 at 16:45 Permalink

        Thank you so much for your reply. Unfortunately it didn’t work for me, but I might have done something wrong. So I will have a closer look at it (it’s probably me). In the meantime thanks for your help!!

        Reply
        • malihu
          Posted on October 24, 2017 at 17:04 Permalink

          No problem. Let me know if you need me to check the page again and help as what you describe is definitely doable with such script.

          Reply
  6. Juliana
    Posted on October 23, 2017 at 14:45 Permalink

    Hey, i love your plugin =D Thanks!
    I’m having a little problem, because everytime that i click in a menu link, my site goes to top and after goes to the anchor. Do you know what’s it?
    Thanks

    Reply
    • malihu
      Posted on October 23, 2017 at 17:51 Permalink

      Your site uses HTTPS (not HTTP) and your server uses the WWW subdomain. Change your links URL to HTTPS and WWW. For example, change:
      http://capitaniacoworking.com.br/#nossa-rede
      to:
      https://www.capitaniacoworking.com.br/#nossa-rede

      You also need to enable “Page scroll to id” on your links (because your theme prevents “Page scroll to id” from doing it automatically):

      Go to “Page scroll to id” settings and change the “Selector(s)” option value to:

      a[href*=#]:not([href=#])

      Save changes and test your links again.

      Reply
      • Juliana
        Posted on October 23, 2017 at 20:07 Permalink

        I did everything, but now the site flashes a white screen

        Reply
        • malihu
          Posted on October 23, 2017 at 23:51 Permalink

          You didn’t add the www part in your links URL. See my previous comment. Your URLs should start with:
          https://www.
          because your server is set to always redirect to www subdomain.

          Change your links and they won’t reload the page each time you click them.

          Reply
          • Juliana
            Posted on October 24, 2017 at 00:40 Permalink

            Thanks, it’s amazing now!

  7. Paul Herzlich
    Posted on October 22, 2017 at 16:55 Permalink

    Is there a way to increase the offset conditionally by the height of the WordPress Admin Bar if it is displayed? So I can see my page, for example, when logged in viewing a preview of the page. Thanks.

    Reply
    • malihu
      Posted on October 22, 2017 at 20:13 Permalink

      No (only what you see in “Offset” section is available).

      You could probably write some custom CSS to do what you describe but I wouldn’t spend time for such thing.

      Note that you can disable the admin toolbar in User options (Users -> Edit User -> “Show Toolbar when viewing site”), so you could temporarily disable the toolbar in order to preview the page without it.

      Reply
      • Paul Herzlich
        Posted on October 24, 2017 at 12:22 Permalink

        Thanks. I understand. I can’t see how to do it in CSS, since somewhere you need to test whether the admin bar is showing and I know of no way to do that except in JS. And the issue is not only when previewing a page but also in front-end page builders, which there are more and more of nowadays. What you have is quite a good product. It’s too bad that you don’t think this is a useful improvement.

        Reply
  8. Alexandr
    Posted on October 2, 2017 at 07:36 Permalink

    Everything works fine, thank you very much.
    At you on a site the demo costs the menu from above displays scrolling of pages. Give please the name of the paling, really liked.

    Reply
  9. Ruggy
    Posted on September 28, 2017 at 17:59 Permalink

    Love the wordpress plugin, but for some reason I cant get it to work on mobile, any ideas?

    Reply
    • malihu
      Posted on September 28, 2017 at 18:14 Permalink

      I can’t say. I’d need to see your site in order to help. Can you post your link?

      Reply
      • Ruggy
        Posted on September 28, 2017 at 20:22 Permalink

        Theres the link. Thanks for your help!

        Reply
      • Ruggy
        Posted on September 28, 2017 at 20:23 Permalink
      • Ruggy
        Posted on September 29, 2017 at 02:20 Permalink

        I have another question… how can I get the “home” button to go back to the home page? I have the url set, but it doesnt do anything….

        Reply
        • malihu
          Posted on September 29, 2017 at 02:43 Permalink

          About the home link:

          Give the home link a URL of #top:
          your-url/#top

          About the mobile links:

          Your theme has its own functions attached on the menu links. These might prevent “Page scroll to id” from scrolling the page on mobile. Try enabling the Prevent other scripts from handling plugin’s links option in plugin settings and test if it fixes the issue.

          Also, if you deactivate “Page scroll to id”, do the mobile menu links work?

          Reply
          • Ruggy
            Posted on September 29, 2017 at 03:19 Permalink

            Alright, so I got the home link to work, thank you!

            Now im a little confused on the “Page scroll to id” youre talking about… can you elaborate?

        • malihu
          Posted on September 29, 2017 at 15:37 Permalink

          Go to WordPress admin -> Plugins and Deactivate “Page scroll to id”. Then, check you site on mobile and see if the menu is working (what happens when you click the links?)

          If the mobile menu doesn’t work with or without “Page scroll to id” activated, then the issue is within your theme.

          Reply
          • Ruggy
            Posted on October 13, 2017 at 18:09 Permalink

            Menu does not work when I deactivate the plugin…

        • malihu
          Posted on October 14, 2017 at 00:50 Permalink

          Then the problem with the mobile menu is within your theme.

          Reply
  10. Mike Brogan
    Posted on September 13, 2017 at 13:50 Permalink

    Is it possible to have different colour highlighting for each menu option: e.g. red for Menu Option 1; green for menu Option 2; etc.?

    Reply
    • malihu
      Posted on September 15, 2017 at 01:31 Permalink

      Highlight styling is done with CSS, so you can style each of your links accordingly. The plugin does not colorize the highlighted links (it only marks each link as highlighted).

      More info on links highlighting

      Reply
  11. Flo
    Posted on September 3, 2017 at 21:17 Permalink

    Hey! Thanks for the great and easy to use plugin. I have a question to the mobile use. Can i change the offset on mobile? My navigation is fixed and the height changes on under 768px.

    Reply
    • malihu
      Posted on September 4, 2017 at 00:34 Permalink

      Yes, please see offset expressions section above.

      Reply
      • Flo
        Posted on September 5, 2017 at 15:44 Permalink

        Awesome, that’s nice. I typed the id of my menu (.navbar) and the offset scroll is perfect on desktop and mobile. Thanks a lot!

        Reply
  12. Tatsiana
    Posted on September 3, 2017 at 21:15 Permalink

    Good day, I have a question about the plugin usage. I am building a website with Sydney theme using the Elementor builder plugin. This plugin does not show panel grid for page ID. So I installed Page Scroll to ID Plugin. To assign ID to page sections I use “Page Editor” as shown in the examples, and it works, but then my home page loses all the customization that I have done through the Elementor plugin. If I return page appearance to the state I have done, the custom link I have created is not working. So, how can I make the Elemetor styled page work together with your plugin? Thank you very much

    Reply
    • malihu
      Posted on September 4, 2017 at 00:49 Permalink

      Hello,

      I can’t really help as I don’t know how Elementor or Page Editor work. Maybe the theme has id attributes already set that you can use(?) You can search them by opening your page in a browser with developer tools.

      Can you insert shortcodes in page builder? If yes try using plugin’s shortcodes to create targets and/or links.

      I’m not sure if the following link helps:
      https://www.youtube.com/watch?v=ZIdppV7MbD8
      but you could probably create the targets with anchor widgets (as seen in the video link) and then go to “Page scroll to id” settings and change the “Selector(s)” field to:
      a[href*=#]:not([href=#])
      so it handles any links that point to such target anchors.

      Reply
      • Tatsiana
        Posted on September 12, 2017 at 09:23 Permalink

        Thank you very much. The link to the video was very helpful. It solved my problem.

        Reply
  13. Cole
    Posted on September 1, 2017 at 14:54 Permalink

    Nice and great info. can you tell me please how I can do the same thing for this page

    Reply
    • malihu
      Posted on September 1, 2017 at 16:11 Permalink

      1. Install & activate plugin.

      2. Go to plugin settings and insert:
      [rel='m_PageScroll2id'], #toc_container .toc_list a
      to “Selector(s)” field.

      3. In plugin settings, enable “Prevent other scripts from handling plugin’s links” option.

      4. Save changes and test your page.

      Reply
  14. Blabla
    Posted on September 1, 2017 at 13:57 Permalink

    Thanks a lot, very good work! Keep the good work!

    Reply
  15. Murali
    Posted on August 31, 2017 at 23:36 Permalink

    I have a problem two links enable at a time I have checked highlight only one at a time but it’s not working please give a solution. Thank you Here is Error Link: http://prntscr.com/gfjuwb

    Reply
  16. Rocky
    Posted on August 18, 2017 at 23:37 Permalink

    Great addon it works well but I’m having trouble getting the scrolling functionality to work with Visual Composer.

    My issue is VC is using it’s own shortcode for buttons and I’m not exactly sure how to use insert the ps2id into the link to make it work. Here is the VC button shortcode
    [argenta_sc_banner_box block_type_layout="full" block_type_full_align="center" block_type_subtitle="after" title="Title" subtitle="Subtitle" description="description" background_image="6302" link_url="url:%23seo|||" button_typo="weight~inherit" readmore_button="type=default&amp;size=default" css_class=""]

    I might be missing something obvious.

    Thanks Malihu!

    Reply
    • Rocky
      Posted on August 18, 2017 at 23:59 Permalink

      Nevermind, figured it out. But if anybody else stumbles upon these comments the solution is just to add “ps2id” to the custom class of a button.

      Reply
      • malihu
        Posted on August 19, 2017 at 19:20 Permalink

        Yes that’s the easiest way to enable the plugin on these links. Thanks for posting the solution!

        Reply
  17. [email protected]
    Posted on August 18, 2017 at 16:27 Permalink

    Hi,

    I’m trying to use the page scroll to id plugin with visual composer elements (section or rows).
    After having created the ID by filling the required option in VC, i have created a button to target the full url (i.e URL: https://mywebsite.com/index.php/Mypage/#Mytarget).

    When i refresh the page to try to click the button to go to the targeted section, the page scroll well.
    But after moving to another section with the mouse , i try to click again the button to target the same section again, but the offset position is totally different from the first one.

    Do you know how i can be sure that all clicks over the button will make me jump exactly in the same position ?

    Thank you for your help.

    best regards,

    Daté.

    Reply
    • malihu
      Posted on August 18, 2017 at 20:29 Permalink

      Hi,

      I can’t really help with such issue unless I see your page. Can you post your site’s URL?

      Reply
  18. Billy Smith
    Posted on August 13, 2017 at 22:12 Permalink

    I am sorry for the typo above. The URL is this

    Reply
    • malihu
      Posted on August 14, 2017 at 01:38 Permalink

      Your links are handled by another script which prevents “Page scroll to id” from doing its thing. The cached/minified script is:
      ...wp-content/cache/minify/179d3.js
      line: 22

      Go to “Page scroll to id” settings and try enabling “Prevent other scripts from handling plugin’s links” option. Save changes and test your link(s).

      Reply
      • Billy Smith
        Posted on August 14, 2017 at 14:26 Permalink

        I have selected that option now. Still it’s not working.

        Reply
        • Billy Smith
          Posted on August 14, 2017 at 14:33 Permalink

          I can see a strange thing happening, where ever in the id I add $ that works perfectly fine and in the rest urls its same.
          Check here

          Reply
          • malihu
            Posted on August 15, 2017 at 18:27 Permalink

            Your link “Bands –Single, Dual and Tri-band” causes a js console error. This is because you have an empty space in its URL:
            #Bands –Single-Dual-and-Tri-band

            Edit your page and remove the space from link’s URL/href and test again to see if it fixes the issue.

          • Billy Smith
            Posted on August 15, 2017 at 19:39 Permalink

            Corrected it thanks a lot. Please check my another comment.

            This link

          • malihu
            Posted on August 15, 2017 at 20:01 Permalink

            The problem you had is now fixed (I just tested it). The issue you had was because of this error.

        • malihu
          Posted on August 14, 2017 at 15:25 Permalink

          If the option does not work, you need to do it manually.

          You have to edit the script I posted above (179d3.js), find the text:
          o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').click
          and replace it with:
          o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').not("._mPS2id-h").click

          Replace exactly what you see above.

          I can’t see any other way of fixing this because your theme (or another plugin?) is actively preventing other plugins (like “Page scroll to id”) from handling links with hash (#) and scrolling the page.

          Adding $ in the URL prevents page from scrolling at all.

          Reply
          • Billy Smith
            Posted on August 15, 2017 at 14:23 Permalink

            The plugin is working fine but still one issue is there.
            When I open link with id in a fresh window, it doesn’t take to my id. Check
            this url
            I have already selected
            Scroll from/to different pages (i.e. scroll to target when page loads)

  19. Billy Smith
    Posted on August 13, 2017 at 21:02 Permalink

    I have enabled the option to show #id in the URL but it is not working. I have tried everything. Kindly check and let me know why this is not working.

    Reply
  20. blake
    Posted on August 11, 2017 at 23:50 Permalink

    Hi there, I’m trying to have my page scroll to the top of a widget, but even if I add offset it still scrolls all the way to the top of the page.

    There’s a big blue button on my homepage that says “GET A FREE QUOTE” and I’d like the page to scroll to the anchor/id I’ve added to the Quote widget. I can’t seem to get the offset right, so the top of the widget is hidden behind the sticky nav.

    Thanks in advance,
    B

    Reply
    • malihu
      Posted on August 14, 2017 at 01:28 Permalink

      Hello,

      The target you’ve added is below widget’s title (it’s within the widget content), so the “top” of the widget (which includes its title) gets “hidden” behind the sticky menu.

      You should either increase the link’s offset (e.g. to 150) or add the target via plugin’s target widget (instead of shortcode).

      Reply
  21. Jeremy
    Posted on August 8, 2017 at 17:42 Permalink

    For some reason when I use the browser URL’s (http://suttoncompany.com/update/#aboutus) instead of the hash links (#aboutus) it highlights all of the sections on the page. So the rollover effects in my menu always stay activated. Is there a way to fix this?

    Reply
    • malihu
      Posted on August 14, 2017 at 01:19 Permalink

      The links are highlighted by your theme (not the plugin), so it’s not something to be fixed within the plugin.

      You need to change the theme’s CSS rules that “highlight” same-page links. If you add something like the following in your theme’s custom CSS, it’ll probably do the trick:

      #main-nav > li.act > a._mPS2id-h{ color: #fff; } .upwards-effect>li>a._mPS2id-h>span:before{ opacity: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .upwards-effect>li>a._mPS2id-h:hover>span:before, .upwards-effect>li:hover>a._mPS2id-h>span:before{ opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

      I got the CSS selectors above by your theme’s stylesheet files (custom.css, main.css etc.).

      Reply
      • Jeremy
        Posted on August 21, 2017 at 19:30 Permalink

        That worked, thank you so much for your time and your help with this.

        Reply
  22. Hervé Huchon
    Posted on August 7, 2017 at 13:14 Permalink

    Hi there,
    I’m using mapSVG plugin for wordpress which displays markers on a map. I want to link these markers to anchors below in the same page. But I can’t make page scroll to id work in this environnement … although I’ve managed to make it work in other pages.
    Is there a chance you could help, or even now the problem here ?
    Thanks a lot for your help.
    !!
    Hervé

    Reply
    • malihu
      Posted on August 7, 2017 at 13:40 Permalink

      Hi,

      I think that the only way to do this would be via javascript by using plugin’s scrollTo method.

      Something like:

      (function($){ $(window).on("load",function(){ $(".mapsvg-marker[href*='#']").click(function(){ var target=$(this).attr("href"); $.mPageScroll2id("scrollTo",target); }); }); })(jQuery);

      The above should be in a script tag at the bottom of your HTML (e.g. right before the closing body tag).

      Reply
      • Hervé Huchon
        Posted on August 7, 2017 at 16:06 Permalink

        Thanks for helping.
        Unfortunately, this doesn’t work either …

        Hervé

        Reply
        • malihu
          Posted on August 14, 2017 at 00:59 Permalink

          Well, I guess it won’t work with your map.

          The map has image elements with some custom (or hidden) data attribute that can’t be used by other scripts. There are no link elements in the SVG (only image elements). If the SVG contained elements with an actual href attribute that pointed to some id it would work but as it is now, the plugin (or any other plugin) won’t work.

          Reply
  23. Wenche
    Posted on August 5, 2017 at 18:44 Permalink

    After updating wordpress my links no longer scroll. I have tryed deactivating the plugin and reactivating it, but there is no difference. Before the update the scroll was perfect and elegant (from all my links in the footer).

    Reply
    • malihu
      Posted on August 6, 2017 at 12:34 Permalink

      Hi,

      This is not related to “Page scroll to id”. I get about 35 jquery errors in console when opening your page. Those js errors indicate that jQuery is not defined.

      None of your jquery scripts is currently working (woocommerce, tabs, widgets, ps2id etc.).

      You either have a corrupted jquery script (...wp-includes/js/jquery/jquery.js) or your SSL is somehow prevents jquery library from loading.

      I’d suggest to try replacing jquery.js with a fresh one which you can get from WordPress zip archive or jquery.com.

      Reply
  24. JD
    Posted on August 2, 2017 at 17:54 Permalink

    I already post this once but I wasn’t sure if it went through, I didn’t receive any confirmation and my post isn’t appearing. I’m having the same problem Ryan was. I can’t get your plugin to scroll, I’ve tried everything including the suggested above. It jumps straight down to the target without scrolling. I’m hung up not knowing if I can use your plugin or not which is causing me to lose development time.

    Thanks for your help, JD

    Reply
    • malihu
      Posted on August 3, 2017 at 11:24 Permalink

      You need to enable the plugin on your link. Go to plugin settings and change the “Selector(s)” option value to:

      a[href*=#]:not([href=#])

      Save changes and test your link.
      Let me know

      Reply
  25. JD Ford
    Posted on August 2, 2017 at 16:59 Permalink

    Hey there! I’m having the same problem Ryan was. If I reload the page it will scroll but it just jumps not matter what I do. I followed the instructions above but it hasn’t changed anything. Help please?

    Reply
  26. Tim Boyd
    Posted on July 26, 2017 at 01:19 Permalink

    Hi there, how do I use your plugin with an image map? It looks like this:

    <img src="http://my-domain.com/my-image.jpg" alt="" usemap="#Map" /><map name="Map" id="Map"> <area alt="" title="area-01" href="#01" shape="poly" coords="00, 10, 20, 40" /> <area alt="" title="area-02" href="#02" shape="poly" coords="50, 60, 70, 80" /> </map>

    When I click on area-01 it hard jumps to #01. How can I use the smooth scroll here?

    Reply
    • malihu
      Posted on July 26, 2017 at 19:03 Permalink

      Hi,

      Try this:
      Go to plugin’s settings and change “Selector(s)” field to:

      a[rel='m_PageScroll2id'], area[href*='#']

      Save changes and test.
      Let me know

      Reply
      • Tim Boyd
        Posted on July 27, 2017 at 18:07 Permalink

        Works like a charm… Thanks a bunch!

        Cheers

        Reply
        • malihu
          Posted on July 28, 2017 at 04:53 Permalink

          You’re welcome!

          Reply
  27. Dome
    Posted on July 15, 2017 at 01:12 Permalink

    Hello,
    it is working well but i need something working with custom tabs, i have woocommerce product with custom tabs, one of this tabs contain contact form and id at the beginning of the form, so the problem is when you select the single product the default tab is “description” , trough button link I can jump to form tab but without scroll, so what can I do for to go directly from the product page at the form tab and scroll to id anchor?

    Thanks

    Reply
    • malihu
      Posted on July 16, 2017 at 20:19 Permalink

      Hi,

      Try enabling the plugin on your tab links. Go to plugin settings and change “Selector(s)” value to:

      a[rel='m_PageScroll2id'], .woocommerce-tabs li a[href*=#]:not([href=#])

      Save changes and test the tabs.

      Let me know

      Reply
      • Dome
        Posted on July 16, 2017 at 23:15 Permalink

        Hi
        I’ve tried but don’t try, or maybe i didn’t explain well the problem
        I give you the link of the page using for testing
        link

        so trough a snippet in the function file , I can change the tabs using link like #tab-new, if you click the Inquire button you can see the tab is changed but don’t scrool the page at the correct anchor, but if you click now in the “Scroll to the form” link below the button (it use your plugin as anchor) you can see it work. The complete process require two clicks and is no good, i need one click only for to go at the anchor starting from another tab .
        With the previous version of woocommerce it was trying the snippet but now no more, for this reason i search help in your plugin
        I’have removed your suggestion code so you can try the original situation
        Thanks

        Reply
        • malihu
          Posted on July 17, 2017 at 13:07 Permalink

          So, you need to click the “Scroll to the form” link (or any link like this) and it should do 2 things:
          1) Switch “Inquire about this product” tab.
          2) Scroll smoothly to the target.
          Is this correct?

          If the above is what you want, you’ll need to do it via javascript. Can you add a javascript/jQuery code in your theme?

          Let me know if there’s a place in your theme for custom javascript so I can post a script to test.

          Reply
        • malihu
          Posted on July 17, 2017 at 23:17 Permalink

          OK. Firstly you need to change your “Scroll to the form” link to point to the actual tab id.
          So change its URL from:
          #form
          to:
          #tab-inquire-about-this-product

          Then, add the following to your functions.php:

          function ps2id_to_woocommerce_product_tab() { if( is_product() ) { ?> <script type="text/javascript"> (function($){ $(window).on("load",function(){ $("a._mPS2id-h").on("click",function(e){ var $this=$(this), targetID=$this.attr("href"), targetTab=$("ul.tabs li a[href*='"+targetID+"']"); if(targetTab.length){ e.preventDefault(); targetTab.parents("ul.tabs").find(".active").removeClass("active"); targetTab.parent("li").addClass("active"); $(".woocommerce-Tabs-panel:visible").css("display","none"); $(targetID).css("display","block"); } }); }); })(jQuery); </script> <?php } } add_action( 'wp_footer', 'ps2id_to_woocommerce_product_tab', 30 );

          Save and test the link. It should switch tabs and scroll to the active tab.

          You can use the same script for the other tabs if you want. For example, if you create a “Page scroll to id” link with URL #tab-description, it will switch to the “Description” tab and scroll to it.

          Hope this helps

          Reply
          • Dome
            Posted on July 18, 2017 at 11:35 Permalink

            Weel done Malihu and thank you very much,
            it is working perfectly, very good solution for to use the page scroll to id for wordpress plugin even if you want to navigate to another custom tab.
            To help future users i can explain the system:
            before i have installed Custom Product Tabs for WooCommerce plugin and create new tab with inside contact form 7 form,
            after that i have installed the Malihu plugin “page scroll to id for wordpress” , after that i have implemented in the function theme file the snippet created by Malihu and it is all. Just take care when you create the “page scroll to ID link” don’t do as shortcode, leave the box unchecked .

            Thank you again

            Dome

        • malihu
          Posted on July 18, 2017 at 14:30 Permalink

          Great ! Thanks for the extra info 🙂

          Reply
  28. Ryan
    Posted on July 13, 2017 at 10:27 Permalink

    Hey! Great plugin! I’m having a slight issue though. When I assign a link as #section_ID, the page jumps to that section without a scroll. However when I do the whole http://www.website.com/#section_ID, it scrolls but reloads the page first (as expected). How can I get the scrolling action with just the section ID? I’d like to note that I can apply the whole link with tag to a menu item and the page does not reload before scrolling, however, this doesn’t work when I put the link on a button on my page.

    Reply
    • malihu
      Posted on July 13, 2017 at 11:25 Permalink

      Hi,

      Is the button a link element (i.e. anchor tag)?

      If yes, there’s chance that your theme takes control of the menu links and prevents “Page scroll to id” from scrolling the page. In such case try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings.

      Is your site online so I can check it?

      Reply
      • Ryan
        Posted on July 13, 2017 at 11:30 Permalink

        Ah posted at the same time – thanks for the quick reply! I did enable the “prevent other scripts..” and I’m still getting the jumps between sections.

        Reply
    • Ryan
      Posted on July 13, 2017 at 11:28 Permalink

      I also should note that I have configured my site to not use the www. prefix. Site is linked in the “website” section. Thanks in advance!

      Reply
      • malihu
        Posted on July 13, 2017 at 11:39 Permalink

        OK I checked your page. I think you just need to enable the plugin on your buttons elements.

        Go to plugin settings and first disable “Prevent other scripts from handling plugin’s links” option as you don’t need it. Then, change the “Selector(s)” field value to:

        a[rel='m_PageScroll2id'], .btn[href*='#']

        Save changes and test your buttons. Everything should be working 😉

        Reply
        • Ryan
          Posted on July 13, 2017 at 20:00 Permalink

          Wow, you are fantastic!! Thank you so much for your help! 😀

          Reply
          • malihu
            Posted on July 13, 2017 at 22:42 Permalink

            You’re welcome 🙂

Comments pages: 1 2

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php