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 5 6 7 8 9 11

  1. Guillaume
    Posted on September 18, 2020 at 19:08 Permalink

    Hello,

    I have a problem since last update : smooth scrolling is not working anymore and have have this in my console :

    ps2id selector issue: a[href*=#]:not([href=#]) selector needs quotes jquery.js?ver=1.12.4-wp:2 Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#]),._ps2id,a[data-ps2id-api='true'][href*='#'],.ps2id > a[href*='#'],a.ps2id[href*='#']

    Do you know what the problem is ?

    Thanks for the great plugin !

    Reply
    • Guillaume
      Posted on September 18, 2020 at 19:10 Permalink

      Sorry my bad I just saw the notification in the plugin settings page 😉

      Reply
  2. Matt
    Posted on September 17, 2020 at 20:35 Permalink

    On my homepage, ALl the anchor links are highlighted all the time no matter where the page is scrolled. What am I doing wrong? I have each menu item set to the PS2id css class, but they stay highlighted all the time?

    Reply
    • malihu
      Posted on September 17, 2020 at 23:03 Permalink

      The links highlighting you see, happens by your theme (not the plugin). It’s common for themes to highlight same-page links and that’s what happens in your case.

      You need to do the following:

      1.Change your links URL to use https.
      Right now, your links URL start with http and your web server redirects them to the SSL version of your site.

      2.Go to plugin settings and disable “Keep the current element highlighted until the next one comes into view” and “Highlight by next target” options. Click save changes.

      3.Overwrite your theme’s highlighting by adding the following to your CSS:

      #top-menu li.current-menu-item > a._mPS2id-h, .et-fixed-header #top-menu li.current-menu-ancestor > a._mPS2id-h, .et-fixed-header #top-menu li.current-menu-item > a._mPS2id-h { color: #fff !important; } #top-menu li.current-menu-item > a._mPS2id-h.mPS2id-highlight, .et-fixed-header #top-menu li.current-menu-ancestor > a._mPS2id-h.mPS2id-highlight, .et-fixed-header #top-menu li.current-menu-item > a._mPS2id-h.mPS2id-highlight { color: #2fe0e0 !important; }

      This will also enable highlighting while page scrolling.

      Hope this helps

      Reply
      • Matt
        Posted on September 23, 2020 at 18:44 Permalink

        Thank you SOOO much for this! Your customer service is outstanding and I will be donating some money for this plugin!

        Reply
        • malihu
          Posted on September 24, 2020 at 03:28 Permalink

          Thanks! Glad I helped 🙂

          Reply
        • malihu
          Posted on October 16, 2020 at 17:37 Permalink

          If there’s such URL in the address bar (like the one in your link), then page scrolling will break (the page will reload) no matter which plugin is used or if smooth scrolling is used or not (it’ll break even if no smooth scrolling or plugins are used at all).

          You can test this by temporarily disable “Page scroll to id” and see that the same problem occurs. This happens because the link’s URL becomes completely different than the one in browser’s address bar, so the page reloads when you click the links.

          The only solution is create a custom js script that will change the links URL from full to relative, if it detects that the address bar contains such Facebook parameters (and if it’s on homepage).

          This isn’t very complicated but it requires development, so if you want me to do it and give you a quote, please contact me here. I’d be happy to help.

          Reply
          • Matt
            Posted on October 16, 2020 at 18:38 Permalink

            I get the following when trying to use the contact page, fyi:

            Failed to send your message. Please try later or contact the administrator by another method.

            Anyway, i would def be interested in getting a quote from you, but I have ALSO noticed that if you type in the full “www.wellingtonchasenc.com” it doesn’t work either. So, I don’t think the fbclid is the problem so much as the “www.” that has to be in the fb link to make it clickable. This should work, no?

        • malihu
          Posted on October 16, 2020 at 21:43 Permalink

          I guess the contact form malfunction was temporary because it seems to be working now. You can also find my email address (manos-at-malihu.gr.) below the contact form, so you can message me directly.

          Typing www.wellingtonchasenc.com doesn’t work because of the same reason. Your links do not match the address bar URL (your links do not have the www part). This is because:

          https://www.wellingtonchasenc.com

          and

          https://wellingtonchasenc.com

          are not the same URL (so the page reloads).

          Again, this happens regardless of using smooth scrolling or not. This is the way browsers and web servers work.

          To avoid this, you should either redirect www or change your menu links to use root-relative URL (instead of full URL). For example, change your “Latest News” link URL from:

          https://wellingtonchasenc.com/#latestnews

          to:

          /#latestnews

          Anyway, send me an email 🙂

          Reply
  3. Andy
    Posted on September 10, 2020 at 13:21 Permalink

    hH there,

    I’m having trouble linking between pages. Scroll to anchor is working fine on the home page. However, when I try and click the menu link from another page the browser seems to remove the #sizes2 link, so it jumps to the page but does not then scroll. I’m sure this is something I am doing wrong, so any help much appreciated.

    PS such a great plug in though, thanks for the work.

    Reply
    • malihu
      Posted on September 10, 2020 at 13:45 Permalink

      Hello,

      Your logo link has the following href/URL value:

      #!/up

      This value creates the problem.

      I don’t know why they’ve set it in such way but you can bypass it by unchecking “Enable different pages scrolling on all links” option in plugin settings.

      Uncheck this option, save changes, test your page and let me know.

      Reply
      • Andy
        Posted on September 10, 2020 at 15:06 Permalink

        Thanks for the fast reply. I’ve unchecked the box but it doesn’t seem to have had any effect.

        Thanks again in advance.

        Reply
        • malihu
          Posted on September 10, 2020 at 17:35 Permalink

          I just saw that “Page scroll to id” is not used in your site. Is it activated? Your links scroll the page via some other mechanism which uses URLs starting with #!/, like #!/colours

          In order to use “Page scroll to id” you’d need to change your links URL from #!/colours to the standard #colours type.

          EDIT: You’d also need to add the following at the end of excluded selectors field:

          , a[href*='#!/']

          Reply
  4. joe s
    Posted on August 29, 2020 at 23:43 Permalink

    I’m trying to change the autogenerated widget id in my blogs sidebar.
    Page scroll to id target: custom_html-4
    to
    Page scroll to id target: newsletter
    I know I can wrap the widget’s title, but was wondering if there was a simple way of updating the autogenerated page scroll id for widget items?

    Reply
    • joe s
      Posted on August 29, 2020 at 23:56 Permalink

      Sorry, just realized there is now a page scroll to id target widget option! Incredible plugin, great job! Simple and effective!

      Reply
      • malihu
        Posted on August 29, 2020 at 23:59 Permalink

        No problem 🙂

        Reply
  5. Cathy O
    Posted on August 14, 2020 at 02:42 Permalink

    I really like this plug-in for wordpress and have received positive feedback for how it works. One problem I’m having though, is after WordPress released their new version, whenever I try to create/modify a page/post using Divi, the editor goes out into its waiting mode with the rotating circles. I deactivated all the plugs-in and then reactivated them one by one, and unfortunately “page scroll to id” was the culprit. For now, I deactivate the plug-in when I need to make changes, then reactivate when I’m done, but do you have any other suggestions or helps that could work around that issue? It did just start with this new version of WordPress. Also, I did try the “Prevent other scripts. . .” to see if that would help, and it didn’t. Thanks again for the great plug-in.

    Reply
    • malihu
      Posted on August 14, 2020 at 14:04 Permalink

      Hello and thanks for the feedback.

      Have you set a value on the “Highlight selector(s)” option in plugin settings? Can you set it to:

      .menu-item a

      save changes and test the divi builder?

      Reply
      • Cathy O
        Posted on August 18, 2020 at 22:14 Permalink

        I had but it didn’t make a difference. However, I just got your updated version, and in the settings area, there was a comment on the selector(s) that I had an old value. I updated to the new value, and now it works perfectly! Thanks!

        Reply
        • malihu
          Posted on August 18, 2020 at 22:54 Permalink

          Great 🙂 Glad I added this warning as it caused issues like the one you had. Thanks a lot for the feedback.

          Reply
          • Sigi K
            Posted on August 19, 2020 at 10:44 Permalink

            The same problem for me and also for me, the change to the new value fixed the problem.

  6. Xin Chen
    Posted on August 13, 2020 at 19:11 Permalink

    Hi, I wonder if this plugin can automatically highlight which page (link or section) in the menu we are scrolling to when we scroll down the page? Thank you!

    Reply
    • Xin Chen
      Posted on August 13, 2020 at 19:25 Permalink

      I tried mPS2id-highlight but it’s the same as ps2id. No highlight effect.

      Reply
      • malihu
        Posted on August 13, 2020 at 22:47 Permalink

        Hi,

        You need to add the CSS rules you want for the mPS2id-highlight class. Add the following to your CSS (e.g. in customize > additional css):

        .main-navigation ul li a.mPS2id-highlight { background-color: #55b74e; color: #ffffff; }

        Let me know

        Reply
        • Xin Chen
          Posted on August 14, 2020 at 07:01 Permalink

          Thank you malihu, it works. Besides, I have another problem, can I set highlight by text but not link? Now when the link is moving out of view, the highlight will disappear so I want to try highlighting by text. Thanks!

          Reply
          • malihu
            Posted on August 14, 2020 at 12:31 Permalink

            There are multiple ways to make highlight work better.

            One way is to enable “Keep the current element highlighted until the next one comes into view” in plugin settings.

            Another way is to remove the “Page scroll to id target” block and instead wrap your content into group blocks like this:

            group paragraph paragraph ... group

            and add the target id on the group block like shown here:

            http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#targets-section-gutenberg

            Hope this helps

  7. Neil
    Posted on August 11, 2020 at 01:43 Permalink

    Hey,

    I installed the plugin in the website above and I’m trying to run it for my home page but

    1) the buttons don’t appear on my visual/code editor
    (I have enabled “Enable insert link/target buttons in post visual editor” option too).

    2) the smooth scroll doesn’t work and the page jumps to the target

    Please help!

    Reply
    • Manos
      Posted on August 11, 2020 at 12:23 Permalink

      Hi,

      1)The toolbar buttons are for the classic /old post visual editor (before wordpress version 5). You probably use the new block editor (Gutenberg editor). See how to use the plugin with the current wordpress block editor here:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#targets-section-gutenberg

      2)I get a lot of javascript console errors in your page. Try to disable auto-optimize plugin/feature and see if it fixes the issue.

      Let me know

      Reply
      • Neil
        Posted on August 11, 2020 at 15:35 Permalink

        Thank you – deactivating auto-optimize plugin made the smooth scroll work.

        Thanks again!

        Reply
        • Manos
          Posted on August 12, 2020 at 12:50 Permalink

          You’re welcome. You could probably exclude “Page scroll to id” and other plugins from auto-optimize if you don’t want to deactivate it.

          Reply
  8. Mhd Sid
    Posted on August 3, 2020 at 22:36 Permalink

    I am using on one-page site, I am using the new citadela theme from AIT themes club. Now when I press any section it first shows me top of the page and then going down.

    If I am in the middle section and i want to scroll below from where I am, it always first starts from the top of the page instead of going directly to the new section below.

    Anything you can suggest?

    Reply
    • Mhd Sid
      Posted on August 4, 2020 at 00:18 Permalink

      I was using this URL in wordpress Appearance/Menu section so it was working but always going on top of the page and then to the desired block

      /homepage#id-classic-360

      i removed homepage and use it like this
      /#id-classic-360 its working smoothly now. By using / before it working from all pages.

      Reply
      • Manos
        Posted on August 4, 2020 at 12:29 Permalink

        The issue was probably using or missing https or www parts and the links URL didn’t match browser’s address bar URL.

        Reply
  9. Ashlee
    Posted on July 30, 2020 at 21:59 Permalink

    Hello,

    hoping you can help me with the scroll to id plugin on wordpress. I’m using Elementor builder with Astra theme. It works for the first id link, but none of the subsequent ones. Sometimes it moves but not to the right place (or even close). I’ve tried going through your help tips, but can’t seem to figure it out. I’ve tried adding the id in the CSS id, as well as using the anchor drag and drops but neither are working properly. Please help!!
    Ashlee

    Reply
    • malihu
      Posted on July 31, 2020 at 05:13 Permalink

      Hi,

      The issues you’re having is because your root html element has its scrollbar hidden via CSS.

      You simply need to revert this by adding the following to your CSS:

      html{ overflow-x: initial; } body{ overflow-x: hidden; }

      Let me know

      Reply
      • Ashlee
        Posted on July 31, 2020 at 16:46 Permalink

        Malihu!! You are amazing!

        Thank you so much for your super fast and super accurate help, spot on first try.

        Thank you!!!
        Ashlee

        Reply
        • malihu
          Posted on August 1, 2020 at 12:50 Permalink

          You’re welcome! Glad I helped 🙂

          Reply
  10. Linda McColley
    Posted on July 5, 2020 at 06:42 Permalink

    I’d like a different delay on the homepage only. Is there a code alteration I can use for that one instance?

    Thank you!
    Linda

    Reply
    • Linda McColley
      Posted on July 5, 2020 at 06:44 Permalink

      I forgot to say that I love this plugin!

      I also had one more question.

      Is there a way to make each of the pages automatically scroll even coming from a url typed in the browser? Or especially the homepage upon first load.

      Right now it is just when you click home. I would like for it to be all the time.

      Thank you!!!

      Reply
    • malihu
      Posted on July 5, 2020 at 17:26 Permalink

      Hi,

      What do you mean by delay? Which option?

      Also can you explain a bit more the automatic scroll you want? Can you give me an example?

      Reply
  11. [email protected]
    Posted on July 1, 2020 at 15:43 Permalink

    Hello,
    This plugin is great. Thank you so much.

    I am using Bridge and have managed to put in the code to make the mobile menu clear. The navigatio works perfectly on desktop but for some reason when it’s jumping from another page to a point on the home page it’s no longer scrolling down. So if you click onto ‘Technical Information’ which is the only stand alone page and then back to ‘about’ the scrolling has stopped working only on mobile. Do you know why this might be?

    This is the script I put in the footer to clear the mobile overlay but maybe there is still an error in it:

    (function($){
    $(window).on(“load”,function(){
    $(document).on(“click”,”#main-menu .menu-item ._mPS2id-h”,function(){
    $(“button.mfp-close”).trigger(“click”);
    });
    });
    })(jQuery);

    Thank you

    Reply
    • malihu
      Posted on July 1, 2020 at 22:43 Permalink

      Hello,

      The script is correct 😉

      Try to give a delay for the page load scrolling. Go to plugin settings and insert 500 to the delay for scrolling to target on page load field.

      Save changes and test your page.

      If it doesn’t work, try few higher values like 1000 or 2000.

      Reply
      • [email protected]
        Posted on July 2, 2020 at 10:58 Permalink

        Hello, thank you for your reply. I already have 1000 in that field. It shows an obvious pause before scrolling on desktop but doesn’t move on the mobile unfortunately.

        Reply
        • [email protected]
          Posted on July 2, 2020 at 11:24 Permalink

          I’m so sorry – I’ve just checked everything again and the option to disable the plugin below 720 pixels was on. Thank you again for your support.

          Reply
          • malihu
            Posted on July 2, 2020 at 12:15 Permalink

            No problem 🙂

  12. Christian
    Posted on June 29, 2020 at 13:03 Permalink

    Hi,
    thanks for the great plugin!

    Can I put the “Next Section Link” in a sticky area?
    By clicking on the link the script scrolls to the next section?

    Which settings in WordPress are necessary?

    See also https://codepen.io/awkdigi/pen/qBbPmPg

    Reply
    • malihu
      Posted on June 30, 2020 at 09:30 Permalink

      Hi,

      This is not something that can be done automatically or via some plugin option.

      You’d need to develop a custom js script that utilizes plugin’s scrollTo method. In other words, you’d need to hire a web developer to create such functionality, which would be specific for your site.

      Hope this helps

      Reply
  13. Bart
    Posted on June 26, 2020 at 15:00 Permalink

    Hello

    I implemented your plugin and it works fine. It’s just that the scrolling doesn’t always go super smoothly, especially on longer stretches it . I already played with the settings and did also reset them, but the problem keeps being there.

    If you would have to have a look, that would be great. Maybe it’s something small.

    Thanks
    Bart

    Reply
    • malihu
      Posted on June 26, 2020 at 19:19 Permalink

      Hello,

      Scrolling performance can be affected from a lot of things like amount of same-page links, CSS styling (e.g. css box-shadow), other scripts etc. as well as browser engine, OS, device etc.

      Try the following and see if it makes things better:

      Since you don’t use plugin’s highlight feature, go to plugin settings and set the following value to “Highlight selector(s)”:

      .nothing

      Also, you can try enabling “Prevent other scripts from handling plugin’s links” option.

      Let me know

      Reply
  14. Marcel Hauer
    Posted on June 23, 2020 at 10:35 Permalink

    Hi!

    After my WordPress update this plugin leads to following error message: “Deprecated: contextual_help is deprecated since version 3.3.0! Use get_current_screen()->add_help_tab(), get_current_screen()->remove_help_tab() instead. in /home/bodybabm/www.craftkoerper.com/wp-includes/functions.php on line 5088”.

    After deactivating the plugin, the message vanishes. Du you have any fixes for this?

    Thank you man! 🙂

    Reply
  15. eric
    Posted on June 10, 2020 at 17:25 Permalink

    When scrolling to the target, the .mPS2id-highlight class is not forced to a link! As a result, only when you click on the link, it can change its appearance. If you simply scroll through the content, the link does not change the appearance. In this case, the .mPS2id-target class works fine.

    Link: http://visitechtest.ru.xsph.ru/%d1%86%d0%b8%d1%84%d1%80%d0%be%d0%b2%d0%be%d0%b9-%d0%bd%d0%b0%d1%80%d1%8f%d0%b4-%d0%b4%d0%be%d0%bf%d1%83%d1%81%d0%ba-new/

    Reply
  16. Sophie
    Posted on June 5, 2020 at 14:26 Permalink

    We love your plugin but it seems to have a major site-breaking conflict with the latest version of WPDiscuz, and we have been forced to disable it.

    Is there a workaround possible?

    Reply
    • malihu
      Posted on June 5, 2020 at 15:55 Permalink

      Hi,

      What conflict? Can you explain the issue?

      “Page scroll to id” cannot really “break” a site and most issues can be easily fixed via plugin settings. Can you describe the problem so I can help?

      Reply
      • Sophie
        Posted on June 5, 2020 at 17:13 Permalink

        When the scroller is enabled the comments load very very slowly or simply hang up, and the scroller itself becomes jerky and a bit irrational.

        We were surprised about this too, as we didn’t anticipate anything like this from such a relatively simple plugin – but we’ve tested it repeatedly, and whenever we disable scroller the comments load fine, as soon as it’s enabled – bam, everything goes pear shaped again.

        We do get quite a lot of comments.

        Note – this only started happening since WPDiscuz newest iteration was installed. It was fine with earlier versions.

        Reply
        • malihu
          Posted on June 5, 2020 at 18:59 Permalink

          OK thanks for the info.

          This sounds like there are a lot of link-target relations (from WPDiscuz) that get eligible for highlighting by “Page scroll to id”.

          I just checked a random page in your site and there’s something like 200 link-targets from WPDiscuz (links like <a href="#comment-185873"> with targets).

          “Page scroll to id” by default will try to highlighting all these links! That’s why the page hangs.

          When you activate the plugin, go to “Page scroll to id” settings and set a specific selector value in “Highlight selector(s)” option, for example:

          .menu-item a[href*='#']

          to have only menu links highlighted or something like

          .nothing

          if you don’t use plugin’s highlight feature.

          So, set a “Highlight selector(s)” value, save changes and test you page.

          You could also just exclude the links-targets that are in WPDiscuz section by adding the following value at the end of “selectors are excluded” field in plugin settings (just copy/paste the line below, including the comma at the start)

          , #wpdcom a

          Again, save changes and test your page(s).

          Let me know 🙂

          Reply
          • Sophie
            Posted on June 6, 2020 at 01:16 Permalink

            Thanks for your really fast response.

            I have tried the exclude option and setting a specific selector value.

            It definitely seems smoother and faster at the moment. Still a bit juddery when the link from top menu to comments section is clicked but so far it’s now functioning while before it wasn’t

            So this is looking good so far.

          • Sophie
            Posted on June 6, 2020 at 16:37 Permalink

            Yeah, there are still issues. The scroll is still jerky – especially in Safari. And oddly, it seems to get worse the longer it’s running.

            I had to disable it again.

            Any further ideas?

        • malihu
          Posted on June 6, 2020 at 17:18 Permalink

          Thanks for the feedback. Can you set a more specific selector value on “Selector(s)” option?

          For example set:

          .menu-item a

          if you use the plugin only on menu items.

          Reply
  17. joe
    Posted on June 5, 2020 at 05:44 Permalink

    Hello, awesome plugin man, quick question.

    I cant get it to scroll, it just jumps to the section and also doenst allow for me to adjust offset.

    Im using the bridge theme and chance you know if there are conflicts?

    Reply
    • malihu
      Posted on June 5, 2020 at 12:58 Permalink

      Hello,

      It seems that your theme handles all menu links with a URL in the form of #id.

      The theme script that does this prevents “Page scroll to id” (or similar plugins) from doing its thing, as it hijacks all menu links clicks.

      For reference, the script that does this is this one:
      ...themes/bridge/js/default.min.js

      Fortunately, the theme script does this only on links that have a URL that starts with a hash (#) or with your site’s URL, so the quick and easy solution is to make your menu links URL absolute-relative.

      For example, change your “About” link URL from:

      #about

      to:

      /#about

      and smooth scrolling, offset etc. will work.

      Do the same for the rest of your links.

      Let me know

      Reply
      • joe
        Posted on June 5, 2020 at 21:22 Permalink

        That did the trick! Thanks again

        Reply
        • joe
          Posted on June 6, 2020 at 03:48 Permalink

          one more question.

          When i load the site it seems that the first 1 0r 2 times I click the menu links it scrolls past the location. Then if i click again it moves to the right spot. After that they all work correctly. Any idea why. Is the min.js file still messing things up?

          Reply
          • malihu
            Posted on June 6, 2020 at 11:47 Permalink

            This happens because your site is lazy-loading the images.

            Lazy-loading images will affect page scrolling, no matter which plugin you’re using. In fact, you,’ll have the same issue even if you don’t use any smooth scrolling plugin. You can test this by temporarily deactivating “Page scroll to I’d” and testing your links (the page will jump to the wrong place at first).

            You need to disable lazy-loading your images or add a correct/fiixed height on the images placeholder.

            Hope this helps

  18. Marcela Caso
    Posted on June 2, 2020 at 13:23 Permalink

    First of all I want to thank you for your job, you made my day! Because if you see this test website, it has 3 anchor menu and a page ( noticias) before when I was in “noticias” I was not able to recover the anchor in for example contact . Now it WORKS!
    But I have a problem when I came for came from Noticias-> to Como aplico al programa, I am not able to see the title (Requisitos para aplicar al program) , on the contrary if I am in the Inicio and then I go to como aplico al programa I am able to see the title.
    Also if I go directly to the link ( in google bar) http://bamp.elearningspecialenglish.com/#testimonials ( this is the archor for Como aplico al programa) I don´t see the title.

    Maybe is the setting I am not very used to the anchor menu . I really appreciate any help

    Bye for now
    Marcela

    Reply
    • malihu
      Posted on June 4, 2020 at 08:36 Permalink

      Hello,

      Go to plugin settings and:

      1. Set the “Offset” option value to:

      #main-nav:fixed

      2. Enable “Prevent other scripts from handling plugin’s links” option.

      Save changes and test your page.

      Let me know

      Reply
      • Marcela
        Posted on June 4, 2020 at 09:30 Permalink

        Thank YOU!!!!!! It works ! I really appreciatte so much!

        Reply
  19. karakonda
    Posted on May 23, 2020 at 17:33 Permalink

    Thanks for doing such an amazing work with both creating this plugin and helping ppl fix plugin related problems. Truly appreciated!
    I do have a question too: Is it possible for a link (in my case it’s main menu) you click on not to have the rectangular dotted border after the mouse is moved?

    Thanx,

    Karakonda

    Reply
    • malihu
      Posted on May 23, 2020 at 18:06 Permalink

      Hello,

      The plugin does not add any dotted borders or any other styling on links, unless you manually add a CSS styling.

      I think that the dotted border you’re referring is applied by your theme’s CSS and it’s either an indicator of the current page or maybe the link’s outline on focus.

      I can’t really say what exactly happens or provide a CSS solution for this as I’d need to see your page. Can you post your site’s URL?

      Perhaps adding the following to your CSS can help(?)

      a, a:focus, a:active{ outline: 0 !important; }

      Reply
      • Karakonda
        Posted on May 25, 2020 at 14:12 Permalink

        Thank you for the quick response.
        I tried the CSS you suggested, it didn’t work, but since the outline isn’t added by the plugin I’ll try to find a solution elsewhere.
        Thanks again,
        Karakonda

        Reply
  20. Eric
    Posted on May 22, 2020 at 16:35 Permalink

    When scrolling to the target, the .mPS2id-highlight class is not forced to a link! As a result, only when you click on the link, it can change its appearance. If you simply scroll through the content, the link does not change the appearance. In this case, the .mPS2id-target class works fine.

    Reply
    • malihu
      Posted on May 22, 2020 at 16:40 Permalink

      Hello,

      Can you post your site’s URL so I can check what happens?

      Do you have “Allow only one highlighted element at a time” option enabled while having multiple menus?

      Reply
      • eric
        Posted on June 10, 2020 at 17:29 Permalink

        Hi. The link is not sent by message. Maybe it gets into spm?

        Reply
        • malihu
          Posted on June 10, 2020 at 22:15 Permalink

          Indeed it went to spam!

          I just checked your page and you just need to set a specific highlight selector.

          Go to plugin settings and set the “Highlight selector(s)” option to:

          .menu-item a

          Save changes and test your page.

          Let me know

          Reply
          • eric
            Posted on June 12, 2020 at 19:44 Permalink

            Does not help

        • malihu
          Posted on June 12, 2020 at 20:25 Permalink

          Did you changed other options?

          Go to plugin settings and disable “Allow only one highlighted element at a time” and “Highlight by next target” options.

          Save changes and let me know

          Reply
          • erickorrado
            Posted on June 13, 2020 at 16:27 Permalink

            applied everything, nothing helps. Can I send you screenshots of the settings?

        • malihu
          Posted on June 13, 2020 at 17:00 Permalink

          Ok, the issue seems to come from the UTF-8 URL encoding.

          Can you change your links URL to the actual Russian characters? For example, change “Почему ЭНД?” link URL from:

          http://visitechtest.ru.xsph.ru/%d1%86%d0%b8%d1%84%d1%80%d0%be%d0%b2%d0%be%d0%b9-%d0%bd%d0%b0%d1%80%d1%8f%d0%b4-%d0%b4%d0%be%d0%bf%d1%83%d1%81%d0%ba-new/#section-2

          to:

          http://visitechtest.ru.xsph.ru/цифровой-наряд-допуск-new/#section-2

          Let me know

          Reply
          • eric
            Posted on June 15, 2020 at 14:11 Permalink

            Thanks, now everything works fine!

          • eric
            Posted on June 16, 2020 at 23:10 Permalink

            Another problem arose. If you click on the link, then when scrolling the active class remains of the previously clicked link, even though the transition to another section has occurred. The active class only changes if you click on the following link. Although if you just scroll, without clicking, the active class changes normally.

          • eric
            Posted on June 16, 2020 at 23:12 Permalink

            I realized that the mPS2id-clicked class is not automatically removed

        • malihu
          Posted on June 17, 2020 at 14:00 Permalink

          The mPS2id-clicked class is applied on the clicked elements. That’s why it’s not removed when scrolling.

          You should use the mPS2id-highlight class in your CSS to style your links while scrolling and changing sections.

          See more info about the classes in the “Classes & highlight options” section above

          Reply
          • eric
            Posted on June 17, 2020 at 15:24 Permalink

            now everything is fine, thanks!

  21. John Spray
    Posted on May 21, 2020 at 21:30 Permalink

    when i want save the changes this show a 404 page

    Reply
    • malihu
      Posted on May 21, 2020 at 21:58 Permalink

      Do your other plugins save changes?
      Can you save changes in WordPress general settings?

      Did you try deactivating/uninstalling “Page scroll to id” and install/activate it again?

      Reply
  22. Federico
    Posted on May 19, 2020 at 14:09 Permalink

    First at all thank you very much for such lovely plugin!

    How can I set it up to doesn´t make reloading the page everytime a new menu-id link is selected?

    I didn´t check where I m wrong, when I have used it before it worked fine

    any suggestions will be appreciated!

    Federico

    Reply
    • malihu
      Posted on May 19, 2020 at 14:55 Permalink

      Hello,

      Your links URL is not correct. There’s no willkommen page in your site, so you need to remove it from your links URL.

      Also some of your links have a double slash that should be removed.

      For example, change your “Über uns” link URL from:

      /willkommen//#about

      to:

      /#about

      Let me know

      Reply
      • Federico
        Posted on May 19, 2020 at 17:13 Permalink

        Hi thank you you right, i moved the website to one folder to another and i was such kind of error by my side

        Now it looks great!

        Just in the Home page scroll automatically to the first target #willokommen .

        How can i set it up to don´t let it do it automatically, but only once user click on it and let first the slider been watched?

        thank you Malihu

        Reply
  23. Kelley
    Posted on May 14, 2020 at 07:17 Permalink

    How do I get this to just scroll lower on the same page without reloading the whole page, then scrolling down?
    Thanks

    Reply
    • malihu
      Posted on May 14, 2020 at 16:13 Permalink

      The plugin does not reload the page unless the link URL does not match the actual page URL. If the page reloads, your link’s URL is not correct (make sure your not missing www, https etc.).

      Please post your site URL so I can check what the issue is and help.

      Reply
  24. Eric LUCAS
    Posted on April 25, 2020 at 04:51 Permalink

    Hello, thank you very much for your nice plugin scroll2id which in theory is exactly what I need.
    I want the users to see the BuddyPress header image and title for a few seconds, and then the page would scroll very smoothly to the menu (#object-nav), so that they won’t be frustrated.
    Currently the smooth effect does not work.
    I tried various ways during a lot of time…
    You can see that here : https://autistance.org/groups/dep-cris_covid-19/#object-nav

    I have put a “body onload” in header.php, because it’s the only trick that I found. I don’t know anything in PHP.

    <meta charset=&quot;"> <body onload=&#039; location.href=&quot;#object-nav&quot; &#039; > <a href="#content" rel="nofollow"></a>

    I’m sorry but I could not do “better” and in fact I tried (sometimes) during months…

    Thanks a lot if you can tell me how to solve this. I can put PHP “snippets”.

    Thank you.

    Reply
    • malihu
      Posted on April 25, 2020 at 23:36 Permalink

      Hi,

      You should remove the onload attribute on the body element.

      You should also change all your links with empty URL from:

      http://#

      to:

      #

      otherwise you get invalid errors and the links go to empty pages.

      Do you want the scrolling to #object-nav happen when you go to /dep-cris_covid-19/#object-nav or when you go to /dep-cris_covid-19/

      For the first case, you need to go to plugin settings and set the “delay for scrolling to target on page load” option field to something like:

      2000

      which is 2 seconds.

      For the second case, you’ll need to use plugin’s scrollTo method in your script:

      $.mPageScroll2id("","#object-nav");

      for example, adding the script below will smoothly scroll the page to #object-nav after 2 seconds after the page is fully loaded:

      <script> (function($){ $(window).on("load",function(){ setTimeout(function(){ $.mPageScroll2id("","#object-nav"); },2000); }); })(jQuery); </script>

      The script above should be placed in your theme/child-theme footer.php just before the closing body tag (</body>).

      Hope this helps

      Reply
  25. Dominic
    Posted on April 24, 2020 at 12:32 Permalink

    Hi, your plugin works perfectly normally, however when I have a URL with a query appended (eg. to show the customer source, like sellyourjewels.com/?source=facebook) the plugin ceases to function. Is there a way around this?

    Many thanks,
    Dominic

    Reply
    • malihu
      Posted on April 24, 2020 at 13:26 Permalink

      Hi,

      Not sure I understood the issue, but the following URL works as expected:

      https://www.sellyourjewels.com/?source=facebook#what

      Can you explain a bit more the issue you’re having?

      Reply
      • Dominic
        Posted on May 7, 2020 at 13:15 Permalink

        Hi, sorry for the delay in replying – the scrolling effect that shows with a URL query (like sellyourjewels.com/?source=facebook) is built-in to the wordpress theme I use, but this does not have the smooth easeInOutQuint effect that is present with a normal URL like sellyourjewels.com. Is there a way to ensure the scrolling effect is always your smooth one and not the standard plugin one? Hope that makes more sense.

        Reply
        • malihu
          Posted on May 7, 2020 at 16:12 Permalink

          I don’t see any scrolling effect when I type https://www.sellyourjewels.com/?source=facebook in the browser. Do you see one?

          In any case, when there’s no hash (#something) in the URL, the plugin cannot scroll automatically (i.e. there’s no target to scroll to!).

          To scroll on page load programmatically, you’d need to develop a custom script to use plugin’s scrollTo method.

          Reply
          • Dominic
            Posted on May 7, 2020 at 18:13 Permalink

            Sorry, I didn’t explain myself very well. When navigating to my website with a URL query (eg. https://www.sellyourjewels.com/?source=facebook) and then clicking on the menu items at the top (eg, ‘How does it work?’), the scrolling effect is provided by the WordPress theme and not your plugin.

        • malihu
          Posted on May 7, 2020 at 18:44 Permalink

          I see. This happens because of the full URL in the links not matching the actual URL in the address bar when ?source=facebook is present.

          Does the ?source=facebook part occur only on the homepage? Can you add a small js script in your child theme template?

          Reply
          • Dominic
            Posted on May 7, 2020 at 19:55 Permalink

            Hi, yes it is only the homepage where I use these tracking links. And that would not be a problem, although I am not very proficient in js.

        • malihu
          Posted on May 7, 2020 at 21:48 Permalink

          OK. Do this:

          Edit your theme’s/child-theme’s footer.php template and add the following script before the closing body tag:

          <script> (function($){ $(document).ready(function(){ var loc=window.location.href; if($("body.home").length && loc.indexOf("?source=facebook") !== -1){ $("a[data-ps2id-api]").each(function(){ var $this=$(this), href=$this.attr("href"); if(href.indexOf("https://www.sellyourjewels.com#") !== -1){ $this.attr("href",href.replace("https://www.sellyourjewels.com","https://www.sellyourjewels.com?source=facebook")); } }); } }); })(jQuery); </script>

          Let me know if it works

          Reply
          • Dominic
            Posted on May 7, 2020 at 22:21 Permalink

            That’s perfect, many thanks for your help!

        • malihu
          Posted on May 7, 2020 at 22:39 Permalink

          Awesome! Thanks a lot for your review 🙂

          Reply
  26. Jon
    Posted on April 20, 2020 at 19:37 Permalink

    Hi, I’m having trouble with multiple highlighted menu bars. I am also having issues with the page reloading on every click vs just a smooth scroll if I’m on the same page. Thank you for you’re help and thank you for making this awesome plugin

    Reply
  27. Straktor Media
    Posted on April 19, 2020 at 17:57 Permalink

    Hi. I was wondering if i can use it with a horizontal scrolling page? Although there is an option in the settings, it doesn’t seem to work on my website.
    By the way, it is not a horizontal scrolling theme by default. It’s an Astra theme that im working with Elementor and some custom CSS to make it horizontal.
    Any help on that would be super appreciated.
    Thanks in advance!

    Reply
    • malihu
      Posted on April 20, 2020 at 17:08 Permalink

      Hello,

      The plugin does not change your theme/page from vertical to horizontal. You need to have a theme with horizontal layout so the plugin can do its thing.

      You also need to keep in mind that the plugin works strictly on document’s root element (html/body), meaning the scrollbar should not be on overflowed container div elements.

      If you want to see a simple horizontal layout to get an idea on the CSS used, check this example:

      http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo-horizontal-layout.html

      Once you’ve made your theme horizontal, you simply need to go to plugin settings and set the “Layout” option to “horizontal” or “auto”.

      Reply
  28. Pinwheelin
    Posted on April 2, 2020 at 20:59 Permalink

    Hi there,

    Thanks for making such an easy to use plugin! This site has jump links on many pages and most of them are working perfectly. One thing I’ve run into that I can’t quite determine the issue for:

    When scrolling to the ‘Youth Grant Initiative’ target from the box on the far right, the first time after the page loads, it goes to the incorrect location (landing in the ‘Al Tauscher’ section above). However, on a second try, or any try after that, it goes to the correct spot, with no changes to the offset settings or placement of the target.

    I couldn’t seem to find other people having this same issue to troubleshoot… any ideas?

    Thank you!

    Reply
    • malihu
      Posted on April 3, 2020 at 09:59 Permalink

      Hello,

      This happens because your page is lazy-loading images.

      When the page loads, your “Bud Award” and “Al Tauscher” images are not loaded, so their height is zero.

      When you scroll to or past them, they load (i.e. “lazy load”), so their height changes from zero to their actual height (e.g. 527 pixels).

      All this is happening while the page is scrolling, so between clicking on “Youth Grant Initiative” and smooth scrolling to the target, the target’s top position has already changed, simply because 2 additional images have loaded before it.

      This issue between smooth scrolling and lazy-loading images is very common no matter what scripts or plugins you use.

      There are 2 thing you can do:

      1)Enable plugin’s “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option in “Page scroll to id” settings (see info)

      OR

      2)Give your image placeholders a fixed height (with CSS) so they don’t change when the actual image is loaded. This of course can be difficult because images are usually responsive and can’t have a fixed value height.

      Reply
  29. Francis Burns
    Posted on March 14, 2020 at 19:09 Permalink

    Hi,

    Great plugin, thanks!

    I am using the plugin with the Phlox theme (which uses Elementor) on a number of my sites.

    At the end of December 2019 (and possibly January 2020) I implemented the plugin in my websites. I am using the “offset” functionality of the plugin, and initially it worked perfectly.

    However, recently the offset functionality has stopped working.

    (There have been a number of Elementor updates and Phlox updates.)

    Here is an example page where the offset functionality worked perfectly with the expandable wiki-style in-page TOC links. But now, it seems that the offset is no longer recognised by the plugin.

    https://frankburns.me.uk/about/legal/privacy-policy/

    Can you please advise me on what may be the problem and how to fix it?

    Note that I do have the “Prevent other scripts from handling plugin’s links (if possible)” set to true.

    Kind regards,

    Francis

    Reply
  30. Riccardo
    Posted on February 21, 2020 at 16:59 Permalink

    Hi,

    I use your plugin in almost every project ’cause is awesome!
    Unfortunately, now I have an issue.
    I have selected the “Remove URL hash (i.e. the #some-id part in browser’s address bar) when scrolling from/to different pages.” option in the plugin settings, but when I click on the menu item of a different page (aka all other pages except home page), the #something is still at the end of the URL.
    Of course the option “Append the clicked link’s hash value (e.g. #id) to browser’s URL/address bar” is disabled.
    The scroll effect works without any problems, I would only remove the hash and its value that comes in the URL when I click a link to a different page anchor.

    Any suggestion would be appreciated!

    Thank you

    Riccardo

    Reply
    • malihu
      Posted on February 21, 2020 at 17:15 Permalink

      Hello,

      It’s impossible for me to help with such issue unless I see your page/site. Can you post your URL?

      Reply

Comments pages: 1 5 6 7 8 9 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