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,015 Comments

Post a comment

Comments pages: 1 6 7 8 9 10 11

  1. [email protected]
    Posted on May 17, 2021 at 16:24 Permalink

    Hi,

    I’m getting different offsets from the same links.

    The offsets are fine when navigating from other pages but are different when on the same page

    Regards
    Martyn

    Reply
    • malihu
      Posted on May 17, 2021 at 17:14 Permalink

      Hello,

      Your server uses SSL (redirects all requests to https), so you need to change your links URL to use https. For example, change your “Products” link URL from:

      http://lion-digital.co.uk/#about

      to:

      https://lion-digital.co.uk/#about

      and everything should work.

      What happens now, is that because your links URL do not match the site URL, “Page scroll to id” does not scroll the page (another script handles page scrolling), thus offset is not applied.
      “Page scroll to id” handles page scrolling only when coming from a different page and that’s why offset works correctly.

      If changing the links URL doesn’t solve the problem, try going to plugin settings and enable “Prevent other scripts from handling plugin’s links” option.

      Let me know if it worked 🙂

      Reply
      • Martyn
        Posted on May 17, 2021 at 18:11 Permalink

        Sir,

        You are a gentleman, it works

        Thanks you v-much

        Regards
        Martyn

        Reply
  2. tristan
    Posted on May 13, 2021 at 16:37 Permalink

    Hi, is it possible to add an icon before the menu text to the linked text and have that change color as well when the row is active?

    Is there any documentation on this or a video?

    thanks

    Reply
  3. Dindy
    Posted on April 9, 2021 at 20:27 Permalink

    I need some help identifying what is blocking the menu links from scrolling on the home page. Same header, same menu, same target id’s etc., the scrolling works fine from an inner page, but isn’t working on the home page.
    I’ve tried every permutation of link I can think of, but I’m obviously missing something.
    Any assistance would be appreciated.

    Dindy

    Reply
    • Dindy
      Posted on April 9, 2021 at 20:44 Permalink

      Whatever I did right after I sent the comment attached to this worked and the scrolling is now working. Thanks anyway!!
      Dindy

      Reply
      • malihu
        Posted on April 9, 2021 at 21:49 Permalink

        No problem. If you need more help let me know 🙂

        Reply
  4. Hannes
    Posted on April 6, 2021 at 12:39 Permalink

    Hello,

    can you please help me to give an offset for just separate sections?
    I don´t want a margin oder padding in some sections, but I need to have an offset after scroll down via anchorlink. Is there a possibility to add e.g. a class to a section, that when click on the anchorlink, the page scroll down to his anchor and stop scrolling after e.g. 50px (different offsets for different anchors) behind the anchor?

    Best regards
    Hannes

    Reply
    • malihu
      Posted on April 6, 2021 at 16:32 Permalink

      See the following FAQ for links with different offsets:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-11

      You can also do it via CSS by giving the section you want a negative top margin and an equal top padding.

      If you can tell me exactly what you want to do in your site (which page, link, section etc.) I’d be able to help more.

      Reply
      • Hannes
        Posted on April 7, 2021 at 12:34 Permalink

        Thank you, that works fine!

        Reply
  5. Carsten A W
    Posted on April 6, 2021 at 11:18 Permalink

    Hi Malihu,
    I have a responsive issue.

    On this URL, the StID works fine on desktop and tablet.
    I use the plugin »WP Mobile Menu«. For the contact I have #kontakt on each page, since there is a form on each of them.

    On mobile devices it works fine for the homepage but not for any other pages. When you click on »Kontakt« the menu disappears and nothing happens.

    What could that be?

    Sincerely
    Carsten

    Reply
    • malihu
      Posted on April 6, 2021 at 16:21 Permalink

      Hello,

      You need to change your “Kontakt” menu link URL from:

      #kontakt

      to:

      /#kontakt

      in order to make it work from different pages in your site.

      Reply
      • Carsten
        Posted on April 7, 2021 at 10:59 Permalink

        Hello,

        I changed that for the mobile menu … now with a click on »Kontakt« it goes to the front page and down to the contact form.

        It should stay on each individual page and just scroll down, since there is a contact form on each page.

        It works on desktop and tablet … but not on mobile.

        Reply
        • Carsten
          Posted on April 7, 2021 at 11:11 Permalink

          I figured that it works with a screen size above 1114 pixel …

          Reply
          • malihu
            Posted on April 7, 2021 at 14:54 Permalink

            It doesn’t work on other pages (on mobile) because the target element is hidden. There’s a CSS rule in your page that hides the target:

            @media only screen and (max-width: 835px) { .eso-hide-mobile { display: none !important; } }

            The page cannot scroll to a hidden target element. You need to either remove the CSS above or overwrite it like this:

            @media only screen and (max-width: 835px) { .eso-hide-mobile { display: block !important; } }

          • malihu
            Posted on April 7, 2021 at 14:56 Permalink

            Better yet, you could simply remove the classes “eso-hide-tablet” and “eso-hide-mobile” from the row element in your page builder/editor (instead of removing or resetting the CSS).

          • Carsten
            Posted on April 7, 2021 at 17:24 Permalink

            Ah … I see …

            That is because we have a row for Desktop and a row for tablet/mobile with the same content but different widths and sizes.

            I changed the ID on mobile to »KontaktM« and likewise in the mobile menu … now it is working.

            Thank you for your support! (just donated 🙂
            Carsten

          • malihu
            Posted on April 7, 2021 at 17:25 Permalink

            Great 🙂 Thanks a lot for your donation and support!

  6. Kim
    Posted on April 5, 2021 at 04:04 Permalink

    My menu will only scroll down to the first option clicked and then it won’t let you select another menu option on my left side menu. Please use layman terms as I am very new to this 🙂

    Reply
    • malihu
      Posted on April 5, 2021 at 13:46 Permalink

      This is a theme/builder CSS issue. You just need to adjust the z-index of your sticky elements.

      Go to WordPress admin > Appearance > Customize > Additional CSS and add the following rule:

      .elementor-widget-nav-menu.elementor-sticky--active ~ .elementor-sticky--active{ z-index: 98; }

      Save/publish and test. This should fix the problem.
      Let me know

      Reply
  7. Jessica
    Posted on April 1, 2021 at 19:25 Permalink

    Hi! This plug in was exactly what I was looking for, unfortunately, it stopped working after the first two links…

    http://www.cvinternational.com/join-our-team

    Who we are and what we do, and benefits and perks are working. The other four aren’t. I have tried everything, nothing is working. I am absolutely a rookie at coding, go easy on me! Thank you in advance for anyyy insight!

    Reply
    • malihu
      Posted on April 1, 2021 at 20:11 Permalink

      I just checked your page here:

      https://cvinternational.com/join-our-cvi-team/

      and all links except the last one work for me. Did you fix them or?

      The last one (“Find Available Positions & Apply”) is not working because there’s no link inside it (like the other ones). I don’t know how you create these panels but you need to make the last one the same as the others.

      Reply
  8. Gil
    Posted on March 30, 2021 at 17:08 Permalink

    Hello the option “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” is simly not working on my end.

    I have a site with a lot of rows, like this example:

    Nav links are: First / Second / Third

    Example content:

    <div id="first"></div> <div id="second"></div> <div id=""></div> <div id="third"></div>

    The nav links (first, second, third) are highlighted if I hover over the given container. So far so good. But if I am hovering over the div without ID, the highligting disappears. I want the second link still be highlighted until I reach the “third” container.

    Reply
    • malihu
      Posted on March 30, 2021 at 17:47 Permalink

      Hi,

      Is it possible to post your site/page URL so I can check it and see what happens?

      Reply
      • Gil
        Posted on March 31, 2021 at 10:16 Permalink

        Sure, here you go:

        https://beta.om-pa.de/

        Reply
        • malihu
          Posted on March 31, 2021 at 14:12 Permalink

          OK. Try this:

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

          #top-menu-nav .menu-item a

          Save changes, test and let me know

          Reply
          • Gil
            Posted on March 31, 2021 at 17:59 Permalink

            Wow. Thank you that fixed everything.
            Thanks for this massive support, stay healthy!

        • malihu
          Posted on March 31, 2021 at 22:58 Permalink

          You’re welcome 🙂

          Reply
  9. Mártins Neto
    Posted on March 24, 2021 at 18:01 Permalink

    Hi Malihu,

    First thanks for the plugin. Im learning yet, so im a noob. Im trying (for long days) to use dragscroll script on my page with your plugin, but it isnt working. I already tried to disable other plugins to see if Page to scroll id works, but it dont. So if you can help me it would be very nice.
    When i enable the plugin, than the anchor links on navigation stops working.

    thats the page:
    https://fluxofixo.com/mapa/

    Thanks again.

    Reply
    • malihu
      Posted on March 25, 2021 at 00:27 Permalink

      Hi,

      You can’t really have both the drug functionality and “Page scroll to id” work at the same time (at least as it is now).

      Right now, the way your page layout is set, prevents “Page scroll to id” from doing its thing. This is because your page has hide the root element (i.e. html/body) scrollbars and instead it’s using the scrollbars of an inner div (which contains the content and is draggable).

      “Page scroll to id” works only with the actual page scrollbar, i.e. it doesn’t work with overflowed divs (related FAQ).

      You can change your page CSS a little to make the plugin work with your design, by adding the following but it will disable the drag functionality:

      #g-page-surround{ overflow: visible; } #g-feature{ width: auto; height: auto; max-width: none; max-height: none; }

      This said, you might be able to move/add the drag functionality to another element (e.g. html/body), though I’m not sure how, cause I have no idea if this functionality is part of the theme or another plugin.

      Reply
      • Mártins Neto
        Posted on March 27, 2021 at 00:36 Permalink

        You are awsome,

        This really worked with the plugin. About the drag function im using a github script called dragscroll, he only works if #g-page-surround {overflow: auto}, while the plugin only work with overflow:visible. Would you know why this happen, can i set the plugin to work with overflow:auto too?

        Thanks for your attention. Have a good day/night.

        Reply
  10. Leonie
    Posted on March 23, 2021 at 02:50 Permalink

    Hey,

    the plugin works great on one of my sites (main navigation) but not on my other site (secondary navigation):

    When I click the menu item it jumps to the respective section (e.g. #prozessmodellierung) but the code doesn’t show the menu item as active:

    class=”__mPS2id _mPS2id-h”

    and not:

    “class=__mPS2id_mPS2id-highlight” (like my other page where it works)

    Any ideas?
    Thank you!

    Reply
    • malihu
      Posted on March 23, 2021 at 14:35 Permalink

      Hello Leonie,

      I can’t really help unless I see your site/page. Is it possible to post your site’s URL so I can check it?

      Reply
  11. raybblin
    Posted on March 22, 2021 at 22:42 Permalink

    All I want to do is on hover the text only be highlighted regardless of whether the target is in viewport.

    And my links are not menu items. The are links on a page that scrolls within the same page.

    Please share the a:hover code that I need to use for a standard link scroll on a page?

    Thanks!

    Reply
    • malihu
      Posted on March 23, 2021 at 14:44 Permalink

      Hi,

      This issue is not within plugin’s scope. It has to do with your theme (not the plugin), so it’s not really possible to post an exact :hover CSS rule.

      If you could post your URL and tell me which link you want to have the hover effect, I could probably provide some CSS rules.

      In general, something like the CSS below might help:

      #main a:hover { color: red !important; }

      Reply
      • raybblin
        Posted on March 24, 2021 at 03:53 Permalink

        Wow! I truly appreciate your help.

        Here is the link to the page https://www.wheelhouse.health/interim2/ourwheelhouse/

        They are not menu items per se but are chapter headings on a page

        Thanks! <3 <3 <3
        Raybblin 🙂

        Reply
        • malihu
          Posted on March 25, 2021 at 00:01 Permalink

          OK I just checked your page. The main issue is that all your links (except the first one) are actually 2 links: one for the text and one for the line with the number. Only the first link is the correct one. The link with the line and number all point to the target #nutrition (I assume this error was made from copy/paste).
          So you’ll probably want to fix this (i.e. make all the links like the first one “RECISION MEDICINE”).

          After that, you can add something like the following CSS:

          .main-container h3 a[href*='#']:hover { text-decoration: underline; }

          You can add the above in:
          admin > appearance > customize > additional CSS.

          If you want a more advanced underline effect, you could change the CSS above to something like this:

          .main-container h3 a[href*='#']:hover { border-bottom: 2px solid; padding-bottom: .2em; }

          Hope this helps

          Reply
          • raybblin
            Posted on March 25, 2021 at 04:07 Permalink

            This works amazing!

            Can I ask for one more tweak?…..

            I want to just make the text color be pure white when I hover it.

            I can’t seem to get the code correct.

            Please help!
            <3
            Raybblin 🙂

        • malihu
          Posted on March 25, 2021 at 13:38 Permalink

          No problem. The color is already white (#ffffff). The problem is that the parent heading (h3) of the link(s) has 0.5 opacity. To fix this, add the following CSS:

          .main-container h3:hover { opacity: 1; }

          Reply
  12. Studio3 Developer
    Posted on March 7, 2021 at 08:04 Permalink

    I added id through the wp bakery page builder but its not working.

    Reply
    • malihu
      Posted on March 7, 2021 at 18:42 Permalink

      There’s another script in your theme that prevents “Page scroll to id” from scrolling the page.

      The script that does this, is (line 276):

      ...themes/reisen/fw/js/core.init.js

      To try fix this automatically, go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option.
      In the “Prevent other scripts from handling plugin’s links selector(s)” field, add the value:

      .menu_main_nav .menu-item a

      Save changes, test and let me know

      Reply
  13. anotoki
    Posted on March 5, 2021 at 05:44 Permalink

    I use your plugin with Kadence Blocks. I used Tabs blocks on the page. I added an ID to each tab and want to click on the anchor link from other places on the page to scroll smoothly and switch the tabs. Scroll successfully with your plugin, but the tabs cannot be switched.

    Reply
    • malihu
      Posted on March 5, 2021 at 15:24 Permalink

      Switching tabs is out of plugin’s scope and functionality. To do this, you’ll need to create and add to your page an additional, custom js script.
      Not sure if you can add such script in your theme/child-theme but if you do, let me know.

      Reply
  14. Vijay
    Posted on February 25, 2021 at 06:19 Permalink

    Hello,

    The plugin looks great and useful.

    When I checked with “Prevent other scripts from handling plugin’s links (if possible)” this option, everything works fine with desktop devices. But in mobile view, the nav-toggle is not closing automatically when I click on a section. But when I unchecked the option in mobile devices its working fine. But in desktop by clicking on navigation, its coming from top on each time. not from previous section.

    Can you please explain me where is the issue and why it is happening?

    Thanks in advance.

    Reply
    • malihu
      Posted on February 25, 2021 at 17:10 Permalink

      Hi,

      This happens because a script in your theme handles page smooth scrolling and prevents “Page scroll to id” from doing its thing.

      When you enable the “Prevent other scripts from handling plugin’s links” option, it removes the js click events of the theme’s script, in order to enable “Page scroll to id” events to work.

      This however, also removes from the links the js click event that close the mobile menu.

      The solution is to keep “Prevent other scripts from handling plugin’s links” option enabled (otherwise “Page scroll to id” won’t work with your theme) and add an additional js script in your theme. The script to add is described here:

      http://manos.malihu.gr/how-to-close-mobile-menu-with-page-scroll-to-id/

      If you can add such script, let me know your site’s URL so I can check it and give you the code to add (the post above describes where to place the code).

      Let me know

      Reply
  15. Sascha
    Posted on February 17, 2021 at 09:49 Permalink

    Hi Malihu
    I love your plugin but i have a problem. With the new update from wordpress the anker dont work. sorry i’m not so good in html or css. maybe you can take a look to http://www.greencarrepair.ch who is the problem. thank you
    best regard
    sascha

    Reply
    • Sascha
      Posted on February 17, 2021 at 21:22 Permalink

      it works… in settings I press “reset to default” tadaaa it works

      Reply
  16. instapedia
    Posted on February 15, 2021 at 04:22 Permalink

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

    Reply
  17. Gordana
    Posted on December 22, 2020 at 23:23 Permalink

    Hi,
    I have a “УПИС” page that opens a dropdown menu when clicked, with the menu items that are anchor linked. This plugin works perfect when I click from any page but when I click from home page nothing happens.
    Also, dropdown menu items that are anchor linked and highlighted all the time. I don’t know how to make anchor links background in dropdown menu grey like they are inactive.
    Thank you.

    Reply
    • malihu
      Posted on December 23, 2020 at 01:35 Permalink

      Hi,

      Firstly, it seems that you need to remove the trailing slash in your menu links URL (the slash before the hash). For example, change your “Акредитовани програми” link URL from:

      https://kizdobranski.com/bk/?page_id=4748/#akreditacija

      to:

      https://kizdobranski.com/bk/?page_id=4748#akreditacija

      Do this for all the links in your dropdown.

      Second: The links don’t work from your homepage, because of this script:

      ...themes/Avada/includes/lib/assets/min/js/general/fusion-scroll-to-anchor.js

      Try this:

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes, test and let me know (we’ll see the highlight issue when everything works correctly).

      Reply
      • Gordana
        Posted on December 23, 2020 at 11:50 Permalink

        Hi Malihu,

        Thank you for quick answer.
        I tried before with removing slashes, then I can open those links from home page but have to click twice on link and they don’t work when I’m on that page “УПИС”, it works only when clicked from other pages.
        I have removed slashes from 3 first anchors in dropdown menu just to show you how it behave.

        “Prevent other scripts from handling plugin’s links” is already enabled.
        If you have any other idea I ‘ll be grateful…
        Tnx

        Reply
        • malihu
          Posted on December 23, 2020 at 17:29 Permalink

          Try deactivating “Page scroll to id” temporarily and see if your links work from the homepage and let me know.

          Reply
          • Gordana
            Posted on December 23, 2020 at 18:03 Permalink

            They doesn’t work, they behave just the same.

        • malihu
          Posted on December 24, 2020 at 02:24 Permalink

          This means that the problem comes from your Avada theme and it’s not something we can solve. You need to contact the theme developers and ask them for support.

          Reply
  18. Ben
    Posted on December 22, 2020 at 16:24 Permalink

    Hi,

    Great plugin with a lot of settings, nice work!
    I’m working with anchor links, starting from the menu. When you’re scrolling through the page, it works fine by clicking the section you want in the sticky header. But when you start at the top, in the ‘main menu’ the smooth scrolling stops too far to the bottom, so halfway the desired section. The custom offset or putting the #header.sticky there doesn’t seem to work either…

    What makes the difference between the perfectly working sticky menu en the main menu who pushes the scrolling the far?

    Ben

    Reply
    • malihu
      Posted on December 23, 2020 at 01:16 Permalink

      Hi,

      The difference in scrolling happens because your theme changes the page/document length the moment the menu becomes sticky (while scrolling down the page).

      When you’re at the top of the page, the menu height is greater than when you’ve scrolled down and the menu becomes sticky (the sticky menu is shorter). This means that every target below your header menu, has its position changed and this happens while the page is scrolling.

      Hope this makes sense as it’s a bit technical.

      The proper way to develop the menu would be to compensate for the height difference of your non-sticky to sticky menu. Since your theme does not do this, we need to do it ourselves by adding the following to your CSS:

      #rs-header .menu-sticky.sticky{ top: 0; } #rs-header .menu-sticky.sticky + *{ margin-top: 149px !important; }

      This will also fix the scrolling “glitch” when the menu becomes sticky, i.e. it’ll make the menu transition (from non-sticky to sticky and vice-versa) much smoother.

      Let me know

      Reply
      • Ben
        Posted on December 23, 2020 at 15:40 Permalink

        That fixed it right away! 🙂
        Thanks a lot, happy to send you a donation.

        Ben

        Reply
        • malihu
          Posted on December 23, 2020 at 17:19 Permalink

          Awesome. Thank you 🙂

          Reply
  19. Koen
    Posted on December 3, 2020 at 16:35 Permalink

    Hello,

    I just started with my website and try to use the page scroll to id to scroll on my homepage. The menu works for most of the links, only the “missie” one stopped working. Can’t figure out why. Besides the page is not really scrolling, but more jumping. It works fine, although scrolling would be nicer. Due to that I am new to building websites, I can’t figure out why it is doing that.

    But the main reason I am commenting is due to the offset. It is not doing how I want it. I want the page to stop just before the header on the top and I tried multiple things, but nothing is working. Even when I place a number manually in the offset part of the plugin, it will not stop. Could you please help me out?

    Thank you in advance.
    Koen

    Reply
    • malihu
      Posted on December 3, 2020 at 21:24 Permalink

      Hello,

      The selector you set in plugin is invalid. Go to “Page scroll to id” settings and set the “Selector(s)” option value to the default:

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

      Save changes and let me know so I can check it again 🙂

      Reply
      • Koen
        Posted on December 8, 2020 at 11:39 Permalink

        Hello Malihu,

        I changed the selector to the value you said and saved the changes. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up.

        Could you maybe have another look?

        Thanks in advance.

        Reply
      • Koen
        Posted on December 8, 2020 at 12:21 Permalink

        Hello Malihu,

        I changed the sector to the default value suggested. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up. Could you maybe have another look at it?

        Thanks in advance.

        Koen

        Reply
        • malihu
          Posted on December 8, 2020 at 19:15 Permalink

          No problem 🙂

          It seems that your HTML document has an error.

          There’s invalid HTML code before the doctype. Your HTML document starts with a div element with id “wp-custom-header”. This code is before the <doctype> tag and is invalid (this is what causes the scrolling problem).

          Right now, your HTML is like this:

          <div id="wp-custom-header" class="wp-custom-header"> <!-- ...div content... --> </div> <!DOCTYPE html> <!-- ...html, head etc. -->

          It should be like this:

          <!DOCTYPE html> <!-- ...html, head etc. -->

          Nothing should exist before <!DOCTYPE html>

          Your wp-custom-header element should be inside the <body> tag.

          Hope this helps

          Reply
          • Koen
            Posted on December 9, 2020 at 00:10 Permalink

            Thank you so much, I would have never found this error myself. Now the scroll to page plugin is working as it should, really nice! Thanks for the help and the great plugin!

        • malihu
          Posted on December 9, 2020 at 20:02 Permalink

          Glad I helped 🙂

          Reply
  20. Paka
    Posted on December 1, 2020 at 23:53 Permalink

    Great plugin, but I can’t seem to get the active link to change color. Here’s my situation… I have a home page that has sections that are id with anchors that fall under a main menu called “Produce” and when I hover over the word “Produce” it opens a dropdown menu with the menu items that are anchor linked. What I’m trying to accomplish is to have the “Home” menu item to stay at the default unselected color (#388143) when someone selects one of the “Produce” subcategories. I also want the the selected link to be a slightly lighter color.

    What’s happening now is that every time I’m on the home page both the “Home” and “Produce” link colors show being active along with all the submenu items. When I select/click a submenu item nothing changes.

    I hope this makes sense! And I am using the Divi theme.

    Reply
    • malihu
      Posted on December 3, 2020 at 21:17 Permalink

      Hello,

      I deleted the previous reply you got here as it was just a spam comment that got through.

      I just checked your site and it seems that highlight is working as intented(?) Did you fix the issue or?

      Reply
      • Paka
        Posted on December 3, 2020 at 22:06 Permalink

        Hi Malihu! No, I just made the top level menu items all the same color regardless of selection status and on the dropdown I am still unable to get the text font color to change at all so I did the background option you detailed above.

        I think the client will be ok with this setup.

        Thanks for deleting that spam…. annoying!!!

        Reply
        • malihu
          Posted on December 3, 2020 at 22:17 Permalink

          The font color doesn’t change because the other css rules have the color value as “!important”. So you just need to set it as important too. For example:

          .mPS2id-highlight { background-color: rgba(56,129,67,0.5); border: 2px solid #388143; border-radius: 12px; color: red !important; /* change red to the color you want */ }

          Hope this helps

          Reply
          • Paka
            Posted on December 5, 2020 at 22:44 Permalink

            I’ll give it a shot! Many thanks and great plugin!

  21. John
    Posted on November 29, 2020 at 03:00 Permalink

    Hi,
    Sorry to bother you – I’m trying to save scroll-to-id’s settings for a new WordPress site, after pressing ‘save’ I’m getting a 403 error page with url ending with ‘options.php’. Is there any way to fix this?
    Thank you!

    Reply
    • malihu
      Posted on November 29, 2020 at 18:47 Permalink

      Hi,

      I haven’t experienced this issue before. Does this happens when you save other settings (like general settings)?

      Do you have any security plugin installed? Are you getting any console errors?

      Can you make sure sure the file permissions are correct (via FTP client)?

      Let me know

      Reply
  22. Rompi
    Posted on November 26, 2020 at 21:49 Permalink

    Hi, I just install your plugin on my site : <a href="https://rompicoffeetogo.com/&quot; and it is so good.

    I have a problem. When I use “#some-id” link format it works. But when I use “https://my-site.com/#some-id” or “/#some-id” link format all of the menu are highlighted. I realized it is because of the theme stylesheet, but I can’t figure out how to solve this.
    Could you give me solution about this?

    Thank you

    Reply
    • malihu
      Posted on November 27, 2020 at 22:42 Permalink

      Hi,

      Did you solve the highlight issue? I checked your page and current menu items do not get highlighted.

      Reply
      • Rompi
        Posted on November 28, 2020 at 17:00 Permalink

        Yes, I fixed that issue by adding this, but I don’t know whether this is the right solution or not.

        a._mPS2id-h{ color: #fff !important; } a._mPS2id-h:hover { color: #cf9e23 !important; } a.mPS2id-highlight{ color: #cf9e23 !important; }

        Now I have another problem. I use Elementor. I added [ps2id id=’some-id’/] on top part of section-5. I want the fourth menu (“PAKET KEMITRAAN”) stay highlighted until section-8.
        I enabled “Keep the current element highlighted until….” and “Highlight by next target” on my plugin setting. But the link only highlighted when section-5 appear or when I am scrolling through section-6 to section-8. When I stop scrolling between section-6 and section-8, the menu is not highlighted. It begin highlighted again when I start scrolling.

        Could you help me to solve this issue?

        Reply
        • malihu
          Posted on November 28, 2020 at 21:40 Permalink

          Your solution is fine.

          I’d suggest to disable the 2 options you enabled and instead of using [ps2id id='some-id'/] to create your targets, use Elementor’s CSS ID field as described here:

          http://manos.malihu.gr/page-scroll-to-id-elementor-guide/

          Hope this helps

          Reply
          • Rompi
            Posted on November 29, 2020 at 20:59 Permalink

            I did your suggestion and added CSS ID on section-5.
            But the menu only highlighted on section-5. I want the menu stay highlighted until section-8

        • malihu
          Posted on November 29, 2020 at 22:45 Permalink

          Ok, now enable “Keep the current element highlighted until….” and see if it does what you need.

          Otherwise, if you want “Cara Gabung” section to stay highlighted until the end of the page, you need to wrap the “Cara Gabung” section along with the ones below it, with a new section with id cara-gabung-rompi

          Reply
          • Rompi
            Posted on November 30, 2020 at 12:08 Permalink

            I’m sorry, I think I didn’t explain it very well to you.
            I want “Paket Kemitraan” menu stay highlighted from “Paket Silver” section to “Paket Entreprise” section.

            I added “paket-kemitraan” on “Paket Silver” section CSS ID and enabled “Keep the current element highlighted until…” on the plugin setting and still nothing happened

        • malihu
          Posted on November 30, 2020 at 22:15 Permalink

          OK. Now, in plugin settings, set the “Highlight selector(s)” option value to:

          #menu-main-menu .menu-item a

          Save changes and test.

          Reply
          • Rompi
            Posted on December 21, 2020 at 16:08 Permalink

            Sorry for late response. It works. Thank you very much for your help

  23. Danilo
    Posted on November 25, 2020 at 16:20 Permalink

    Greetings, Manolis.

    First of all thank you for providing this awesome plugin.

    However, I’ve been having a lot of trouble with highlighting just one anchor at a time. I’ve built the anchors applying anchors to each block/section in Gutenberg/Astra Pro and the scrolling is working fine.

    The highlight effect though is still applied to multiple menu items. No matter what I do it seems either the theme of the browser defaults are overriding the additional CSS:

    .memu-item a.mPS2id-highlight{ color: red; } .memu-item a.mPS2id-clicked{ color: blue; }

    Other details: selectors are a[href*=’#’]:not([href=’#’]), “Enable on WordPress Menu links” is checkeck, “Prevent other scripts from handling plugin’s links (if possible)” is checked.

    Would you kindly please help me fix it?

    Reply
    • malihu
      Posted on November 25, 2020 at 22:15 Permalink

      I can’t really help unless I see your page. Can you post your site/page url?

      Reply
      • Danilo
        Posted on November 27, 2020 at 21:37 Permalink

        OK, I’ve sent it privately.

        Reply
  24. Ian Randell
    Posted on November 25, 2020 at 14:04 Permalink

    Hi there,

    I have your plugin working perfectly on the website I am building and have used the offset to accommodate a sticky header. However, on one page I have an SVG image with links in it and I cannot get the smooth scroll to work. I am guessing it is to do with the xlink:href attribute. I tried to add this into the selectors but that didn’t work. I also tried the class ps2id but that didn’t work either.

    Is there any solution to this?

    Kind regards,

    Ian

    Reply
    • malihu
      Posted on November 25, 2020 at 22:13 Permalink

      Hello,

      The plugin requires an href attribute in order to work. This said, you can have anchor (<a />) elements (i.e. links) with href attribute inside SVG elements. For example:

      <svg width="..." height="..." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a href="#my-section-id"> <rect height="..." width="..." y="..." x="..." rx="..."/> </a> </svg>

      Hope this helps

      Reply
  25. Tim
    Posted on November 22, 2020 at 15:51 Permalink

    Hello,
    I have installed Scroll-to-ID on my website at: https://timbaggaley.com/ and it works great. I like the highlighting in the nav menu as it scrolls through my front page. I want, though, to highlight in the nav menu when on other, static pages, like the contact page, are active. I’d also like the parent page (‘notes’) to be highlighted when viewing single posts.

    I need to work within the CSS for S2ID rather than using the usual, global current-menu-item / current-menu-page mark-up to avoid confusion in the front page, yes? I can’t figure out how to highlight my contact and post parent pages. Please advise.

    Many thanks
    Tim

    Reply
    • malihu
      Posted on November 22, 2020 at 22:45 Permalink

      Hello,

      It seems that your menu links on the homepage have slightly different URLs than your menu links on the contact page. For example on the homepage, the “gallery” link has a URL of #gallery while on the contact page, it has a URL of https://timbaggaley.com#gallery.

      This means that you don’t have to avoid the global current-menu-item class, as it’s not applied in your homepage menu links.

      Try changing your highlight CSS to the following:

      .mPS2id-highlight, body:not(.home) .current-menu-item a, .single-post .menu-item a[href*='#notes']{ color: #8ba98d !important; opacity: 1; }

      The above should highlight the homepage active links, the inner pages links (e.g. contact), as well as your “notes” link when viewing single posts.

      Let me know

      Reply
  26. Miguel
    Posted on November 10, 2020 at 16:01 Permalink

    Hi, please very much help me! I want make one link-menu to go to a desired fragment intro a page.

    I have installed Page scroll to id to my wordpress but it’s not working. My link is here:

    http://herminasig.md/rca/

    could you please help me how to solve this? Thanks!

    Reply
  27. Gil
    Posted on October 26, 2020 at 14:18 Permalink

    Hey, the newest Version 1.6.9 ist compelty unusable with the Divi Theme (Divi Theme Builder isnt Loading, Images will not be loading…) so I went back to 1.6.8.

    Reply
    • malihu
      Posted on October 26, 2020 at 21:25 Permalink

      Hello,

      You probably have an old selector set in plugin settings. Go to plugin settings and set the “Selector(s)” option to:

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

      Click save changes and update plugin to latest version. Everything should work.

      Let me know

      Reply
      • Gil
        Posted on October 27, 2020 at 10:17 Permalink

        Hello,

        the selector you gave me was already set in our plugin settings. We have over 20+ sites running divi and your plugin and with the newest 1.6.9 all are completly unusable, so I had to downgrade every site now.

        Reply
        • malihu
          Posted on October 27, 2020 at 16:20 Permalink

          Was the selector exactly as I posted it, with quotes?

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

          or is it like this:

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

          I have tested 1.6.9 with DIVI and it works for me, so I need to see what’s the culprit. Is there a js console error?

          Reply
  28. Alex Vlair
    Posted on October 26, 2020 at 02:59 Permalink

    Hey there,

    What is the recommended approach to creating an offset using scroll-to-id with Menu links?

    I understand how to create an offset on links with HTML, but since Menu links aren’t directly editable with HTML in WordPress, how can I add an offset?

    Thanks!

    Reply
    • malihu
      Posted on October 26, 2020 at 13:23 Permalink

      It’s better to use your sticky header selector as the offset value. For example, in plugin settings enter the following in “Offset” option field and click save changes:

      #header.sticky

      Reply
      • Alex Vlair
        Posted on October 26, 2020 at 22:48 Permalink

        Thanks for your reply!

        I tried putting #header.sticky and #navigation-menu in the Offset field and neither of them produced any difference in the offset seen clicking on my scroll-to-id link in the Menu.

        My website is http://www.alexvlair.com, and the link is “Projects”. The page scrolls correctly to where I put the scroll-to-id anchor (the text “Projects”) but the offset is wrong and I don’t see a way to modify the offset.

        I also tried using the #ps2id-dummy-offset. I put #ps2id-dummy-offset in the Offset field and created a #ps2id-dummy-offset parameter in my CSS as instructed- but still no effect. My menu link consistently scrolls to the same spot on the page no matter what I change. (I tried emptying all caches as well).

        Perhaps it isn’t compatible with the theme I’m using? (Vavo)

        If there’s another work-around, I’d be happy to know!

        Thanks again for your time!

        Reply
        • malihu
          Posted on October 26, 2020 at 23:24 Permalink

          Please set the offset to #header.sticky and let me know so I can check it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 05:15 Permalink

            OK I just set the Offset parameter back to #header.sticky.

            Thanks again for your help, it’s greatly appreciated!

        • malihu
          Posted on October 27, 2020 at 16:40 Permalink

          Offset is working now, meaning that content is not “hidden” by your sticky header. You also need to try this:

          Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Click save changes and let me know so I can test it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 17:40 Permalink

            Ok done! The “Prevent other scripts form handling plugin’s links” option is now enabled.

            Let me know if you see a difference on your end.

            Thanks!

        • malihu
          Posted on October 27, 2020 at 18:52 Permalink

          OK. The problem is that your theme (or another plugin) uses its own smooth scrolling function, which prevents “Page scroll to id” from doing its thing (scrolling the page, applying the offset etc.).

          I don’t know if this function comes from your theme or another plugin because you’re using cache and your js assets are minified and combined.

          Check to see if there’s an option to disable smooth scrolling on your theme or if some other plugin does it. Otherwise it’s impossible for “Page scroll to id” from handling the links and scrolling.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 20:28 Permalink

            Ah I understand.

            Unfortunately there is no option to enable/disable Smooth Scrolling with my theme (Vavo). I’m not using any other plug-ins related to links or scrolling.

            The js assets that the theme uses are:

            jQuery by John Resig
            Isotope by David DeSandro
            Images Laoded by David DeSandro
            Easing by George Smith
            Owlcarousel by Bartosz Wojciechowski
            Fit-Vids by Chris Coyier
            jQuery vissible by Digital Fusion
            Tweenmax by Greensock
            Lightcase by Cornel Bopp Art
            Revolution Slider by Themepunch

            I’m not sure if the problem is coming from one of these? Is there anything I can do to modify them if there is no option given in the theme? (By editing the CSS, perhaps?)

            I disabled my cache and minify in case you wanted to look again.

            Let me know if you think there might still be something that can be done to solve the issue.

            Thanks for your continued support!

        • malihu
          Posted on October 28, 2020 at 14:34 Permalink

          OK. I checked your themes js files. Try this:

          Give all your menu items (appearance > menus) the css class:

          scroll-to

          Also, change their URL to include the www part. For example, change your “PROJECTS” link from:

          https://alexvlair.com/#projects

          to:

          https://www.alexvlair.com/#projects

          Let me know so I can re-check

          Reply
        • malihu
          Posted on October 28, 2020 at 14:38 Permalink

          Sorry, don’t add the scroll-to class on all menu items. Add it only on the menu items that scroll the page (like the “PROJECTS”).

          Reply
          • Alex Vlair
            Posted on October 28, 2020 at 16:25 Permalink

            Oh, that seemed to work…! The link now scrolls so that the menu is at the same height as the link ID. I suppose this was the intent?

            …So now, how can I add an offset…?

            I’d like it to stop about 400 pixels before the ID point (so that the menu is just above the first two images), is there a way to add this?

            It’s encouraging to see a change in any case! Thanks!

          • Alex Vlair
            Posted on October 28, 2020 at 16:39 Permalink

            Actually that created an additional issue; the “Projects” menu link no longer directs to a new page. What this means is that on every other page in the website, the link does nothing.

            On top of it, it seems with my theme I cannot create multiple menus, which means I cannot edit the menu link to be different on other pages. Only one menu bar for all the pages…

        • malihu
          Posted on October 28, 2020 at 22:55 Permalink

          No problem 🙂

          If you want a 400 pixels offset, just set the value:

          400

          in the “Offset” option field in plugin settings.

          For the other issue (the “PROJECTS” link), you’ll need to add some custom javascript to your theme/child-theme. Is this something you can do? I can send you a code to test.

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 04:20 Permalink

            Ah! Yes, sorry it seems obvious but I guess I didn’t try that.

            It works! So now the front page is working exactly as hoped, thank you very much!!

            For the other issue, I can edit the .php under Theme Options:
            “Vavo Child: Theme Functions (functions.php)”
            I assume this where I would add the javascript code?

            If you do have some code I could test I would love to try!

            Thanks again!

          • Alex Vlair
            Posted on October 29, 2020 at 04:24 Permalink

            (Just for clarity, the functionality that I would like from this menu link on every other page is to load the home page and follow the id target, which is what it was doing before (https://www.alexvlair.com/#projects)
            Thanks!!!)

        • malihu
          Posted on October 29, 2020 at 12:37 Permalink

          Add the following PHP code to your theme/child-theme functions.php:

          //malihu //fix for projects and all similar links that scroll the page function malihu_ps2id_custom_script(){ wp_register_script( 'malihu-ps2id-custom-script', '', array( 'jquery' ), '', true ); wp_enqueue_script( 'malihu-ps2id-custom-script' ); wp_add_inline_script( 'malihu-ps2id-custom-script', '(function($){ $(window).on("load",function(){ var elem=$(".menu-item.scroll-to a:not(._mPS2id-h)"); if(elem.length){ elem.each(function(){ $(this).parent(".menu-item").removeClass("scroll-to"); }); } }); })(jQuery);' ); } add_action( 'wp_enqueue_scripts', 'malihu_ps2id_custom_script'); //-----

          Let me know 😉

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 18:13 Permalink

            Amazing. It’s working perfectly now.

            Can’t thank you enough! It’s amazing that you make yourself so available to help people struggling with the plug-in like myself.
            I’m not sure how you make ends meet with this kind of business model but I’ll make sure to click the donate link at the bottom of the page, I really appreciate your time here!

            Thanks again!!

  29. Amanda
    Posted on October 12, 2020 at 15:13 Permalink

    It wont let me scroll to page ID from another page.

    What do I do to fix this problem?

    Reply
    • malihu
      Posted on October 12, 2020 at 16:42 Permalink

      Please see related FAQ:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-5

      If you need more help, I need to see your site/page.

      Reply
      • Amanda
        Posted on October 13, 2020 at 07:34 Permalink

        Page scroll to id works perfectly on my homepage but if i go to another page lets say portfolio, it won’t let me go to the homepage because it is a custom link where the page scroll is.

        I’m not sure how to add the full address for the ABOUT and SERVICES because it is all on the homepage..

        Thank you for quick response and hope to hear from you v soon,

        Amanda

        Reply
        • malihu
          Posted on October 13, 2020 at 11:53 Permalink

          Hello Amanda,

          Since the links are in your homepage, you can simply use the root-relative URL, by adding a slash in the beginning of the URL. For example, change your “SERVICES” URL to:

          /#services

          and your “ABOUT” to:

          /#about

          That’s easier than using the full URL, like https://aegraphix.com.au/#services.

          You can find more info about URLs here:

          https://yodaconditions.net/blog/html-url-types.html

          Reply
          • Amanda
            Posted on October 13, 2020 at 12:27 Permalink

            Thank you so much! it works now!

  30. Florian Hofmann
    Posted on October 8, 2020 at 14:56 Permalink

    Hello, I love this Plugin and I guess it safes my project :-).

    I have the problem that more than one item is highlighted after scrolling. But only ONE should be highlighted, see this video please:

    https://www.loom.com/share/6918af3251ba466d985e051c519ad689

    Activated is “Allow only one highlighted element at a time” and “Highlight by next target” but still have multiple active.

    Any idea how to avoid to have more then one section active?

    Thank you!
    Florian

    Reply
    • malihu
      Posted on October 8, 2020 at 18:50 Permalink

      Hi,

      I think there’s a conflict between the plugin and the sticky menu. Try this:

      1. Go to plugin settings and disable “Allow only one highlighted element at a time” option.
      2. Add the following in “Highlight selector(s)” option field:

      .iksm-term__link

      Click save changes.

      3. Change your existing CSS rule to:

      .mPS2id-highlight-first{ border: 5px solid blue !important; }

      i.e. change .mPS2id-highlight to .mPS2id-highlight-first.

      Let me know if it worked

      Reply
      • Florian Hofmann
        Posted on October 15, 2020 at 12:13 Permalink

        Hello malihu, THANK YOU very much! This helps me big time! Will play around and if it is ready I will reply again. THANKS, really cool!

        Reply

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