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[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” 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.

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 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 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 id some-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 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.

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;
  }
}

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; 
    }
    
    .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.

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


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

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]
    
  • 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:

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


1,003 Comments

Post a comment

Comments pages: 1 7 8 9 10 11

  1. hvj
    Posted on January 12, 2023 at 10:13 Permalink

    Your plugin generates this error, why?
    Warning: Array to string conversion in ./wp-includes/pluggable.php on line 2279

    Reply
  2. Soenke
    Posted on December 31, 2022 at 12:04 Permalink

    Hallo,

    updating the plugin on 31.12.2022 causes the following error-messages:

    Warning: Cannot modify header information – headers already sent by (output started at …/wp-includes/pluggable.php:2036) in …/wp-admin/includes/misc.php on line 1247

    Warning: Cannot modify header information – headers already sent by (output started at …/wp-includes/pluggable.php:2036) in …/wp-admin/admin-header.php on line 9

    Perhaps there is a mistake in the update?

    Thanks for help an

    cheers new Year!

    p.s.: I’m working with ClassicPress (a fork from WordPress)

    Reply
  3. BK
    Posted on December 31, 2022 at 01:59 Permalink

    Hi Trying to get this to work with Woocommerce. I added in my short description to anchor to description tab, but it doesn’t work. Help!

    Reply
  4. Sarah Higginsa
    Posted on December 25, 2022 at 12:56 Permalink

    Thanks for this article. You have shown some excellent methods in this article. All the methods are perfect. I have also posted a blog on this topic. This is because Elementor has so many free amazing add-ons. Easy-to-use features made creating websites a breeze. Here we talk about “Best Elementor Addons and Plugins for WordPress 2023 – Compared” You can check out it at – https://quomodosoft.com/best-elementor-addons-and-plugins/

    Reply
  5. Fu
    Posted on November 10, 2022 at 01:17 Permalink

    Hey, thanks for the plugin.

    Im using the Page scroll to id with Elementor.

    On one of my websites the plugin works very well. But on my another, doesnt work.

    There’s a way to fix it?

    Thank you so much!

    Reply
  6. Max Herb
    Posted on October 28, 2022 at 13:46 Permalink

    Hello, I have created a custom menu using the Divi Theme menu module which floats on the right side of the page. The links are not highlighting when they come into the viewport. Does the plugin work on menus which are not default theme/wordpress headers? Can you help me to get it to work on my website.

    Example page: https://eduboard.creativepreview.net/product/mozabook-interactive-content-platform-gr1-gr12-subjects/

    Reply
  7. Pleurat
    Posted on September 25, 2022 at 19:00 Permalink

    Hi Malihu,

    I have recently sent an email to you. Let me know if you received it or I should go on and explain the query here once again.

    Many thanks,
    Pleurat.

    Reply
  8. Mehr
    Posted on September 18, 2022 at 17:57 Permalink

    Hi Malihu,

    I’m having trouble on our mobile and iPad site, the links don’t work and the target shows the code. Any idea on how to rectify this?

    Mehr

    Reply
    • malihu
      Posted on September 18, 2022 at 18:42 Permalink

      Hello,

      It seems that you added the shortcodes as plain text inside the titles/heading elements, which doesn’t work. Shortcodes should be added via their own block in visual composer, which iirc is the shortcode block.

      I think you’re using WPBakery Page Builder, correct?

      If yes, instead of using plugin’s shortcodes, you can add the id targets in your content via the block/row id field. Please check the link below on how to do this:

      https://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/

      See the mini guide above and add your ids in the blocks/rows you want. Otherwise, simply use the visual composer’s shortcode block to add the shortcode, e.g.:

      [ps2id id='hairstyling' target=''/]

      Let me know if this helps

      Reply
  9. osmana
    Posted on August 30, 2022 at 14:39 Permalink

    Hi,
    Great plugin, thanks. But the horizontal scroll not working. I use enfold theme and I have added content in a page that is horizontally scrolled and added related links to each section but when I click the links nothing happens. Are there any settings to create horizontal scroll content, did I miss something?

    Reply
  10. Rax Mistry
    Posted on August 18, 2022 at 19:53 Permalink

    It doesn’t work with top menu. Works fine with content link. Tried targeting different way but it doesn’t work for me. Below is code for top menu.

    <a href="#" rel="nofollow">Home</a> <a href="#about-lamo" rel="nofollow">About Us</a> <a href="#investmentphylosophy" rel="nofollow">Investment Philosophy</a> <a href="#contactlamo" rel="nofollow">Contact Us</a>

    Reply
    • malihu
      Posted on August 22, 2022 at 02:55 Permalink

      There’s another script in your theme that prevents the plugin from working on your menu links. The script is this:

      /wp-content/themes/invetex/fw/js/core.init.js

      You probably need to edit this script to make it work. If you want to do this, edit core.init.js, find the line 274 and add the following code under it (in a new line):

      if (jQuery(this).hasClass("__mPS2id")) return;

      Save/update the file, test and let me know if it worked.

      Reply
  11. John
    Posted on August 13, 2022 at 21:07 Permalink

    First i want to say that this is a great plugin and im using it on every site! i ran into a problem tho. Everything works well, but i would like the scroll offset to be different on mobile than it is on the desktop. Is this possible with the dummy offset ,or do i have to target like a specific hidden element that has different sizes on desktop and mobile ? thanks!

    Reply
    • John
      Posted on August 13, 2022 at 21:13 Permalink

      Ok i just realised that i answered my own question, i was doing a mistake of not putting the dummy offset id into the offset field. But i will keep this question here if someone is looking for it. Basically i turned on the dummy offset feature, and then gave it different size in different screens. pretty easy. Here is the code:

      #ps2id-dummy-offset{
      height:150px;
      }
      @media only screen and (max-width: 600px){
      #ps2id-dummy-offset{
      height:0px;
      }
      }

      Have a great day everyone and happy coding!

      Reply
      • malihu
        Posted on August 17, 2022 at 18:34 Permalink

        Thanks for posting the solution as it might help other users 🙂

        Reply
  12. Laura
    Posted on July 20, 2022 at 01:13 Permalink

    I’m using a sticky header on my website, and I’ve set the offset to be #navigation-menu to counteract the overshoot, works great in safari, but this doesn’t get fixed in Chrome. How do I fix this for Chrome?

    Reply
    • malihu
      Posted on July 20, 2022 at 02:59 Permalink

      I can’t really help unless I see your page. Perhaps you need to enable “Prevent other scripts from handling plugin’s links” option in plugin settings(?)

      Can you post your site/page URL so I can see what happens?

      Reply
  13. erik
    Posted on May 24, 2022 at 18:19 Permalink

    hi there

    Thanks for the wonderfull plugin.
    I have a weird problem with it.

    The plugin works for all links, except for the mobile menu on the homepage. Desktop menu on the same page works. mobile menu on other pages works. its just the mobile menu on this one page that wont execute the script.
    im using divi builder

    Cant figure out whats wrong. help would be highly appreciated.

    Thanks

    Reply
  14. Sodga
    Posted on May 19, 2022 at 23:49 Permalink

    Hey Malihu!

    Really nice work on the plugin, works flawlessly!

    Is it possible though, to have certain padding in this auto scroll js with your plugin:

    <script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#section-1").length) return; var $delay=2200; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#section-1"); },$delay); }); })(jQuery); </script>

    To clarify – I need the website to scroll not to ID (in this case section-1) but slightly above. There is a simple work-around, create a empty row with padding, but in my case it later on adds too much additional space. So the best solution would be adding certain padding options which could let the code scroll slightly above/below the directed section, thank you!

    Reply
    • malihu
      Posted on May 20, 2022 at 02:52 Permalink

      Hi,

      Depending on the layout and design of your page, you might be able to do what you need with a bit of negative top margin and an equal positive top padding on the element:

      #section-1{ margin-top: -100px; padding-top: 100px; }

      Alternatively, you might be able to achieve something similar with a :before css pseudo-element with an absolute position and a negative top value, e.g. something like this:

      #section-1{ position: relative; } #section-1::before{ content: ""; display: "block"; left: 0; top: -100px; }

      I’m not sure if any of the above will work in your case (I’d have to see your page to know) but try it and let me know.

      Reply
    • malihu
      Posted on May 20, 2022 at 03:01 Permalink

      Also, note that the CSS solution I provided will always work on the element, i.e. will offset scrolling when auto-scrolling on page load, when clicking a link etc.

      If you only want to offset the auto-scrolling in the page load code and not change the element’s actual offset, you can try changing the scrollTo method in the code like this:

      $.mPageScroll2id("scrollTo","#section-1",{ offset:100 });

      Reply
  15. Sam
    Posted on April 28, 2022 at 13:06 Permalink

    Hello, I’m really happy with this plugin and really like how it works on my site. However, I recently setup a frame redirect for another domain I own, and the plug in doesn’t appear to be working when that site URL is present. Has this happened to anyone else? Any tips?

    Reply
    • malihu
      Posted on April 28, 2022 at 14:06 Permalink

      Hi,

      Can you post your page/site URL so I can check what happens?

      Reply
      • Sam
        Posted on April 28, 2022 at 15:49 Permalink

        Unfortunately the site isn’t live yet (it’s on an under construction page) but I have been briefly putting it live for testing. Basically the plugin works completely fine on my normal website, but when accessed via the redirected url (which is redirected as a frame redirect to preserve the url) the plug in doesn’t work. Interestingly enough the menu options do still jump to the correct position on the page, just not with the scrolling effect.

        Reply
        • malihu
          Posted on April 28, 2022 at 18:42 Permalink

          I see. Unfortunately the plugin (like many js scripts) does not work inside iframe(s).

          This said, you can try/test the following and see if it solves the issue:

          1)Add the following in your wp-config.php (this file is in site’s root dir):

          define('PS2ID_MINIFIED_JS', false);

          Save the file.

          2)Edit plugin’s jquery.malihu.PageScroll2id-init.js file which is inside the js folder in plugin’s directory.

          Add the following code below line 173 (liveSelector:_o.instances... ...+autoSelectors):

          ,inIframe:true

          so code becomes like this:

          ...["selector"]+",."+shortcodeClass+","+autoSelectors ,inIframe:true }); //scroll to location hash on page load ...

          Save the file and test your iframe to see if it worked.

          Reply
          • Sam
            Posted on May 3, 2022 at 18:17 Permalink

            Hi, thanks for the response, I’ve only just been able to see it. It’s not in an iframe, it’s just the method of redirection – so the domain provider basically sends visitors to the domain (say domain x) to my website (domain y) but masks the address with the domain (domain x) they’ve typed in. This particular redirection is called frame redirection. This also means that my domain (x) doesn’t have any hosted folders and therefore no php or js elements to be edited.

            Does that make sense? If not, I guess it will just have to be a peculiarity that I’ll have to live with.

            Thanks for your help so far

        • malihu
          Posted on May 3, 2022 at 23:07 Permalink

          What URLs have you set in your links? Are they like #my-id or http://mydomain/#my-id? If it’s like the latter try to change them to use root-relative URLs like /#my-id

          If the above doesn’t work, I think you still need to try editing jquery.malihu.PageScroll2id-init.js in your “domain y” files and see if it works.
          You need to make the changes in “domain y” files (it doesn’t matter if “domain x” has no directory).

          Reply
  16. [email protected]
    Posted on April 3, 2022 at 21:49 Permalink

    Hello,
    I love the plug in’s ability.

    I’ve followed the instructions for installing and connecting PageScroll to ID.
    I’m using WP theme Twenty Seventeen.
    I used it a few years ago developing locally with no issue.

    This time, the scrolling doesn’t function as expected.
    It reloads the page on each menu selection- then scrolls to the section once the page reloads to the header.

    I’ve read some of the solutions you provided to others.
    My site- since its in localhost right now- doesn’t have the issue with https / http. Its http.

    I’m not sure what else to check for why its behaving with a reload on each menu selection.

    the format of the URL in the custom links is:
    http://localhost:8888/threeRivers/#panel3

    The CSS Classes attribute for the Custom Links are all set to ps2id

    Permalinks setting is set to “Plain”

    Thank you for any guidance you may be able to provide.

    Reply
    • malihu
      Posted on April 4, 2022 at 00:30 Permalink

      Hi,

      Check if the trailing slash (/) is needed or not, e.g. change your link URL to:

      http://localhost:8888/threeRivers#panel3

      and test the page.

      Reply
      • [email protected]
        Posted on April 4, 2022 at 04:32 Permalink

        Good day Mahilu,

        Thank you for replying.
        I removed the trailing slash, it behaves the same.

        Reply
        • malihu
          Posted on April 4, 2022 at 05:20 Permalink

          Make sure your link’s URL is exactly the same with the URL you see in browser’s address bar after you’ve clicked it and the page has fully re-loaded.

          The link’s URL should be exactly the same with the one you see in the browser.

          Reply
          • Laura
            Posted on April 4, 2022 at 19:58 Permalink

            Good day Malihu,
            Thank you for your reply.

            Since I’m developing locally, this is the URL in the browser’s address bar.
            http://localhost:8888/threeRivers/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2FthreeRivers%2F

            It doesn’t change with the selection of the different menu items.

          • Laura
            Posted on April 4, 2022 at 21:16 Permalink

            Update:
            It behaves as expected when I close the WP customize panel.
            It scrolls to the proper section without reloading the page.

            I closed the WP customize panel as I saw the URL I sent above includes the customization window that was open.

            The URL though doesn’t change on each menu selection and scroll to that section, it is always:
            http://localhost:8888/threeRivers/

            I’m not sure if that is normal behavior for the URL or if it should be changing to add the proper section name in the URL once it lands on the chosen section.

            Nonetheless the scrolling works without page reload when Customization panel is closed.

        • malihu
          Posted on April 4, 2022 at 20:27 Permalink

          No problem 🙂

          The URL you posted is in the WordPress administration when using the customizer.
          In order to see how your page actually works, you should test it in a new browser tab with URL:

          http://localhost:8888/threeRivers/

          In other words, you should not test your links inside WordPress customizer.

          Reply
          • Laura
            Posted on April 4, 2022 at 21:56 Permalink

            Yes, lesson learned.

            I apologize for the waste of your time, but greatly appreciate your replies.

        • malihu
          Posted on April 4, 2022 at 21:40 Permalink

          It works as expected then 🙂

          The address bar URL not changing is normal plugin behavior but you can change it if you want in plugin’s settings:

          Go to “Page scroll to id” settings and enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test.

          Reply
          • Laura
            Posted on April 6, 2022 at 05:19 Permalink

            Excellent! Thank you for the direction. I enabled that setting, the change occurs now.

            Thank you again,

        • malihu
          Posted on April 4, 2022 at 22:53 Permalink

          No problem. I’m happy to help 🙂

          Reply
  17. Claire
    Posted on April 1, 2022 at 18:43 Permalink

    Hi, thank you for your plugin et all your work !

    My site (still in development) : https://www.wildbac.ma.fr/
    (password : terrepromise)
    I have one menu with 5 anchor links on the home page (“Accueil”). And then 4 pages.
    I’am working with Divi.

    The plugin seems to work well on desktop. Scroll to sections, links between pages and anchors, items highlighted in the menu and on scroll…. everything is ok on desktop.
    I used .mPS2id-highlight class to style anchor items with just a red color.

    #top-menu .menu-item-object-custom .mPS2id-highlight { color: #7a132c !important; }

    Problem is on mobile : anchor links work well, scroll is ok. But anchor links don’t get .mPS2id-highlight class. And no class such as”current-item” (only for “accueil”). I don’t know why the menu behaves differently on mobile and why there is no mPS2id-highlight class.

    I currently removed any css to try to style those anchors on mobile.

    I hope my explanations are clear. Sorry for my bad english. I appreciate any help you can offer.

    Reply
    • malihu
      Posted on April 1, 2022 at 20:00 Permalink

      Hi,

      Disable “Allow only one highlighted element at a time” option in plugin settings. This is causing the issue. Uncheck the option, save changes and test. It should be working 😉

      Reply
      • Claire
        Posted on April 2, 2022 at 20:14 Permalink

        Hi, sorry but it doesn’t work : no mPS2id-highlight class on mobile…. any other idea ?

        Reply
        • malihu
          Posted on April 2, 2022 at 22:39 Permalink

          No, it does work. It’s just that the css selector you added is only for the desktop menu. Your mobile menu id is mobile_menu, so you need to add to your css:

          #mobile_menu .menu-item .mPS2id-highlight { color: #7a132c !important; }

          Let me know if it works 🙂

          Reply
        • malihu
          Posted on April 2, 2022 at 22:44 Permalink

          You also better use .menu-item instead of .menu-item-object-custom in the css

          Reply
          • Claire
            Posted on April 3, 2022 at 19:31 Permalink

            Thank you very much, it works ! (much better with some css 😉 )
            Your help is invaluable. Rarely have I seen such efficient and generous plugin support.

            It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?

          • Claire
            Posted on April 3, 2022 at 20:18 Permalink

            Thank you very much, it works ! (much better with some css 😉 )
Your help is invaluable. Rarely have I seen such efficient and generous plugin support.
            It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?

        • malihu
          Posted on April 3, 2022 at 19:55 Permalink

          You’re welcome 🙂

          You need to overwrite your theme’s css for the Accueil highlighting. Add this to your css:

          #top-menu li.current-menu-item.menu-item-4260 > a{ color: #66768c !important; }

          Reply
        • malihu
          Posted on April 4, 2022 at 00:23 Permalink

          Ah! I just checked your page again, change the CSS to:

          #top-menu li.current-menu-item.menu-item-4260 > a, .et-fixed-header #top-menu li.current-menu-item.menu-item-4260 > a { color: #66768c !important; }

          Reply
          • Claire
            Posted on April 4, 2022 at 09:36 Permalink

            Perfect, thank you so much !
            Now, i’m gonna play with the offset setting …. 😉
            Have a good day !

  18. franc
    Posted on March 10, 2022 at 22:52 Permalink

    Hi,

    Is it possible to put an opacity layer on the preloader ? I would like to change that opacity to be a full color, so the prealoader hides my content while the page gets loaded and dissappear once the page it’s fully loaded.

    Reply
    • malihu
      Posted on March 11, 2022 at 01:46 Permalink

      Hi,

      This page is for “page scroll to id” plugin, so I’m not sure how your request is related to the plugin(?)

      Reply
  19. FilipeOS
    Posted on February 18, 2022 at 12:06 Permalink

    Hi Malihu, I’m doing this site and like you can see it’s already scrolling horizontally but I tried 12012 different ways to link header menu to sections but it’s not working at all… Since I use your plugin on another site I installed and selected the Horizontal option but nothing happens at all… can you please advise?

    Settings: https://i.ibb.co/CP3mtZg/download.jpg
    Site: shorturl.at/bjwyH

    Thank you!

    Reply
  20. Ben
    Posted on February 3, 2022 at 22:04 Permalink

    Hi, why are these info boxes not displaying equally spaced?

    even the duplicated row below that i then tweaked the copy is wonky?

    thanks

    ben

    Reply
    • malihu
      Posted on February 3, 2022 at 23:42 Permalink

      Hi,

      Not sure I understand but this question seems out of plugin’s scope(?) This page is about “Page scroll to id” WordPress plugin.

      Reply
  21. Luvi
    Posted on January 10, 2022 at 23:28 Permalink

    Hi,

    I cannot understand why, but everytime I click on one of the two link in the menu that are supposed to scroll (the first two), it re-loads the page before scrolling.

    Also I cannot find a way to have only one highlighted only when on the section.

    The page I’m talking about is here: casalovett.com/home

    Let me know if you need more info.

    And, by the way, thank you so much for all the work you’ve done and you’re doing in helping people with the plugin!

    Reply
    • malihu
      Posted on January 11, 2022 at 04:57 Permalink

      Hello,

      Your site uses https and redirects all non-SSL requests (http) to https.

      Your links URL are all http, that’s why the page “reloads”.

      You simply need to change your links to use https. For example, change your “Chi Siamo” link URL from:

      http://casalovett.com/home/#chisiamo

      to:

      https://casalovett.com/home/#chisiamo

      or:

      /home/#chisiamo

      and it’ll work.

      Also, the highlight you see comes from your theme (WordPress themes usually highlight same-page links). You can reset/change this by adding the following to your custom/additional CSS:

      .ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link._mPS2id-h:not(:hover):not(.mPS2id-highlight){ color: inherit; }

      These should do the trick 😉
      Let me know

      Reply
      • Luvi
        Posted on January 11, 2022 at 15:03 Permalink

        Thank you so so much, it’s all solved!

        Damn, I was going crazy with the page-reloading issue and it was very simple in the end.

        Reply
        • malihu
          Posted on January 11, 2022 at 19:50 Permalink

          Awesome! Glad I helped 🙂

          Reply
  22. Frank
    Posted on January 4, 2022 at 17:47 Permalink

    hi with the latest version of divi scroll to id stopped working in horizontal but still work in vertical scroll.
    Can you help please

    Reply
    • malihu
      Posted on January 4, 2022 at 20:01 Permalink

      Hi,

      I just checked your page and both vertical and horizontal work. Did you fix the issue or?

      Reply
  23. Sam
    Posted on December 17, 2021 at 19:22 Permalink

    Hi, I am using DIVI builder and it doesn’t seem to want to play nice with offset. I have tried using the shortcodes and some of the other solutions you have supplied in the past but it’s still not working and scrolling past the element.

    Any assistance would be much appreciated.

    Reply
    • malihu
      Posted on December 18, 2021 at 02:51 Permalink

      Hello,

      There’s another script in DIVI theme preventing “Page scroll to id” from doing its thing.

      Try this:

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. You can also add the following value to “Prevent other scripts from handling plugin’s links selector(s)” option field:

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

      Save changes, test and let me know 🙂

      Reply
  24. Andrew
    Posted on November 17, 2021 at 20:37 Permalink

    Hello,

    Can somebody tell me how can I disable the table of contents on the top of the page I used Cool Timeline plugin please?

    thank you in advance

    Reply
    • malihu
      Posted on November 17, 2021 at 21:31 Permalink

      Hi,

      I’m not sure what you’re asking is within plugin’s scope(?)
      This said, if you can post your page/site URL I might be able to check what happens and help.

      Reply
  25. Sodga
    Posted on November 16, 2021 at 19:44 Permalink

    Im am trying to make a delayed auto scroll on page load. U have provided the code before:

    (function($){
    $(window).on(“load”,function(){
    $.mPageScroll2id(“scrollTo”,”#id”);
    });
    })(jQuery);

    What I am trying to do is set the autoscroll to only 3 different pages. Could you provide simple steps to follow to achieve this goal and basically disable the plugin everywhere else? Also time delay code for this would be much appreciated also, since I do not have any knowledge you can say in this.
    If my goal is simple, maybe its achievable without the plugin, and you can guide me that way also 🙂

    Reply
    • malihu
      Posted on November 16, 2021 at 20:52 Permalink

      Hello,

      You can effectively disable the plugin just by using a value like .nothing in “Selector(s)” option in plugin settings.

      You can then add the auto-scroll script only in the templates you want using PHP WordPress conditions or by using a javascript condition that checks for specific class(es). If I could see your page I’d be able to provide some code.

      To delay auto-scroll on page load, you can use a simple timeout like this:

      (function($){ $(window).on("load",function(){ var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#id"); },$delay); }); })(jQuery);

      Reply
      • Sodga
        Posted on November 17, 2021 at 10:28 Permalink

        Thank you for the delayed code!

        Absolutely! Here’s one page, which is supposed to be done like another two, which have the same layout (the first 100% screen height slide with picture and Title and after it the respective page content which I want the page to auto scroll after a short time delay)

        https://www.temporary-url.com/12E0E

        I shortened the link so it would not stay in this conversation if you don’t mind.

        Also, if it’s not too hard for you, could you give me short instructions, on where to inject the code that you will provide me, so that I would not break anything.

        P.S. at the moment the plugin is deactivated, if that changes anything.

        Reply
        • malihu
          Posted on November 17, 2021 at 15:55 Permalink

          No problem 🙂

          If your theme provides a field to add javascript code in your theme, you can place the code there. Otherwise, you can simply add the script in your theme/child-theme footer.php template, right before the closing body tag (</body>).

          If you don’t want to deal with PHP code and search for the page id value etc., you can add a javascript condition on the script:

          <script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#my-id").length) return; var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#my-id"); },$delay); }); })(jQuery); </script>

          Reply
          • Sodga
            Posted on November 17, 2021 at 18:06 Permalink

            This is awesome, everything works!!!

            Thank you very much, I wish you nothing but the best!!!

        • malihu
          Posted on November 17, 2021 at 21:29 Permalink

          You’re welcome 🙂

          Reply
  26. jen
    Posted on October 30, 2021 at 13:11 Permalink

    Hello! First: thank you for this lovely plugin!
    Secondly: I want to use two anchors in a text section, which don’t have anything to do with my ps2id-links in my menu. However, they interfer with these menu-links and mess up their styling. Is there a way to “exclude” anchor-links from the ps2id-link-behaviour?

    I hope this was understandable …
    Thanks and regards,
    Jen

    Reply
    • malihu
      Posted on October 30, 2021 at 15:50 Permalink

      You can use the selectors are excluded field to add your links selector in the list.

      This said, the styling can usually be fixed with a few CSS lines. If I could see your site/page I’d be able to help with a pure CSS solution.

      Reply
      • jen
        Posted on November 8, 2021 at 22:37 Permalink

        Thank you so much for your super quick reply! Now that you have explained, I am a littel ashamed to have overlooked the exclude-option …

        Reply
        • malihu
          Posted on November 9, 2021 at 00:40 Permalink

          Don’t be 🙂 Glad I helped.

          Reply
  27. Steve
    Posted on October 5, 2021 at 19:17 Permalink

    Is it possible to scroll a page down without user interaction, to activate a scroll on page load or shortly after?

    Reply
    • malihu
      Posted on October 5, 2021 at 23:38 Permalink

      Sure but you’ll need to add an extra js script in your page/theme template.

      For example, you can add the following script in your theme/child-theme footer.php right before the closing body tag (</body>):

      <script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#id"); }); })(jQuery); </script>

      and change the #id to the id you want to scroll to on page load.

      The code above is the basis and you can expand it with a delay, run on specific page(s) etc.

      Reply
  28. Jenifer
    Posted on September 24, 2021 at 22:31 Permalink

    I found your plugin to do just what I need—highlight menu items as I scroll through a long, one-page website. So thank you! I have a question about styling, though.

    My website is http://www.midtowncaboose.com/staging (Please disregard all content and colors. They are just placeholders as I figure out this styling issue.)

    I am able to change the text and/or background color of the links when I scroll by targeting .mPS2id-highlight.

    My nav is a ul, with each link as a li, which I think is pretty common. I would like to be able to style the li that contains each link when I scroll, rather than just the link itself.

    I have figured that if I give the li no padding and hidden overflow, and I display the a as block, the a fills the li container. That works great for changing the background color of that menu section.

    Is there a way to give that section a box shadow? I would love any insight you can offer. Thanks!

    Reply
    • malihu
      Posted on September 26, 2021 at 23:02 Permalink

      Hi,

      You don’t really need the li element to be overflow: hidden. You can remove it and give the link the box-shadow you want and it’ll work. Is there a reason for having the hidden overflow on the list item?

      Reply
      • Jenifer
        Posted on September 28, 2021 at 19:32 Permalink

        Nope! I was experimenting and came across the advice to do that. I’ll take it off and see if I can make it do what I want. Thanks so much for your reply!

        Reply
        • malihu
          Posted on September 29, 2021 at 00:17 Permalink

          No problem 🙂

          Reply
  29. [email protected]
    Posted on July 30, 2021 at 15:45 Permalink

    <script> (function($){ $(window).on("load",function(){ $(document).on("click",".mega-menu-link .mega-menu-item .mega-menu-item-type-custom #.mega-menu-item-1501 .mega-menu-item-object-custom ._mPS2id-h",function(){ $(".mega-menu-toggle.mega-menu-active").trigger("click"); }); }); })(jQuery); </script>

    I cannot get the mobile menu to hide when I click on contact.

    Kind regards,
    Gavin

    Reply
  30. Alan Stewart
    Posted on June 27, 2021 at 03:58 Permalink

    Hi, Malihu. I’m using your wonderful PS2ID plugin on an Elementor site but I’m having the issue that others have mentioned: the mobile menu won’t close on click. I’ve tried some of the scripts you’ve posted and they don’t seem to work. Can you help me with this? The link above is a prototype page for my one-page site, and I’ll be using the same mobile menu on additional portfolio pages.

    I appreciate any help you can offer. Let me know if you need more info.

    Reply
    • malihu
      Posted on June 27, 2021 at 05:26 Permalink

      Yes, of course I can help 🙂

      Try the following script and let me know if it works:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click",".elementor-nav-menu .menu-item ._mPS2id-h",function(){ $(".elementor-menu-toggle.elementor-active").trigger("click"); }); }); })(jQuery); </script>

      Reply
      • Alan Stewart
        Posted on July 3, 2021 at 18:31 Permalink

        The script worked great. Thank you, Malihu!

        Reply
        • malihu
          Posted on July 4, 2021 at 23:35 Permalink

          You’re welcome 🙂

          Reply

Comments pages: 1 7 8 9 10 11

Post a comment

Cancel reply

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