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

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

Page layout

Set page scrolling direction (i.e. restrict scrolling) to top-bottom (vertical) or left-right (horizontal) accordingly. For both vertical and horizontal scrolling select auto.
This option does not transform your theme’s templates layout (i.e. it won’t change your theme/page design from vertical to horizontal).

Offset

Offset scroll-to position by x amount of pixels or by selector. The offset value can a be a positive or negative number (indicating pixels), or a matching set of elements in your html (selector). For example, setting the value to 50 will stop page scrolling 50 pixels before reaching the target.
If you need to offset scrolling according to the height (or width) of some element (e.g. according to a responsive/sticky navigation menu), insert the element’s selector in the Offset field. For example, if you have a top fixed/sticky menu with id navigation-menu, set the offset value to #navigation-menu in order to stop page scrolling below it and avoid the menu overlapping your content.

To set different vertical and horizontal offsets (e.g. when Layout is set to auto), add comma separated values in Offset field, e.g. 100,50 (vertical offset 100 pixels, horizontal offset 50 pixels).

The plugin offers selector expressions in order to define more advanced offset values. Examples:

  • :fixed expression – Offset by element with id “some-id” and CSS position fixed: #some-id:fixed
    Assuming vertical layout, the value above will offset scrolling according to the height of #some-id element (i.e. the element that has id some-id), but only when this element CSS position is fixed (i.e. element is sticky). This is useful when for example you have a navigation menu that is sticky/fixed only above a specific viewport size (e.g. only on desktop).
  • :height() expression – Offset by element with class “some-class” and height equal to 100 pixels: .some-class:height(100)
    The value above will offset scrolling according to the height (on vertical layout) of .some-class element (i.e. the element that has class some-class), but only when this element height is exactly 100 pixels.
  • :width() expression – Offset by element with id “some-id” and width greater than 800 pixels: #some-id:width(>800)
    The value above will offset scrolling according to the height of #some-id element, but only when this element width is greater than 800 pixels. This is useful when having responsive navigation menus. For instance, you might have a responsive top sticky menu that switches to a “hamburger” menu when viewport is 800 pixels wide or less. Assuming the menu is as wide as the page/viewport, you’d only want to apply its height as offset when its width is greater than 800 pixels (i.e. when it’s not “hamburger” menu). Adding: #your-menu-id:width(>800) as the offset value will do exactly that.
  • Multiple expressions – Offset by element with id “some-id”, CSS position fixed and height between 50 and 100 pixels: #some-id:fixed:height(>50):height(<100)
    The value above will offset scrolling according to the height of #some-id element, but only when this element CSS position is fixed and its height is anywhere between 51 and 99 pixels.

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.

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.

Divi WordPress Theme Monarch Social Sharing Plugin

Plugin shortcodes

Plugin’s [ps2id] shortcode can be inserted directly in WordPress post editor (as with any WordPress shortcode) in order to create links and id targets in your content.

[ps2id url='#some-id']link text[/ps2id]

Attributes

  • url (required) – Link URL
    Examples:
    [ps2id url='#some-id']link text[/ps2id]
    [ps2id url='http://some-site.com/page/#some-id']link text[/ps2id]
    [ps2id url='/page/#some-id']link text[/ps2id]
    
  • offset (optional) – Link-specific offset (bypasses the general offset value in plugin settings)
    Examples:
    Offset scrolling by 100 pixels
    [ps2id url='#some-id' offset='100']link text[/ps2id]
    
    Offset scrolling by the height (or width for horizontal layout) of the element with id navigation-menu
    [ps2id url='#some-id' offset='#navigation-menu']link text[/ps2id]
    
    Offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels
    [ps2id url='#some-id' offset='{"y":"100","x":"50"}']link text[/ps2id]
    
  • class (optional) – Link custom class(es)
    You can give the link one or more custom classes (separate multiple classes with space).
    Examples:
    [ps2id url='#some-id' class='class-a']link text[/ps2id]
    [ps2id url='#some-id' class='class-a class-b']link text[/ps2id]
    

    You can change the scroll duration/speed of the link (bypass the general scroll duration value in plugin settings) by adding a special class in the form of ps2id-speed-VALUE (i.e. ps2id-speed-600) with VALUE indicating the scroll duration in milliseconds (lower duration equals faster scrolling).
    Examples:

    [ps2id url='#some-id' class='ps2id-speed-400']link text[/ps2id]
    [ps2id url='#some-id' class='ps2id-speed-1300 class-a class-b']link text[/ps2id]
    

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

You can use the wrapper target ([ps2id_wrap]) when you need to wrap content in a target id (same as adding an id attribute to some content). Doing this gives you better control over the highlighting of associated links.
In addition, wrapper target allows you to include other shortcodes within its content, e.g.

[ps2id_wrap id='some-id']
content... [ps2id url='#another-id']link text[/ps2id] 
more content...
[ps2id id='another-id'/]
content... 
[/ps2id_wrap]

Attributes

  • id (required) – Target id
    Examples:
    [ps2id id='some-id'/]
    [ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
    
  • target (optional) – The element that’ll be considered as the actual target for highlighting
    This can be useful when you need better highlighting for target elements that have zero dimensions.
    Examples:
    The associated link will scroll to #some-id element but will be highlighted as if its target is the next adjacent div (the div immediately following #some-id element)
    [ps2id id='some-id' target='#some-id + div'/]
    
    The associated link will scroll to #some-id element but will be highlighted according to #another-id element
    [ps2id id='some-id' target='#another-id'/]
    

Previous versions

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

Pages: 1 2


724 Comments

Post a comment

Comments pages: 1 6 7 8

  1. 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
  2. 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!

  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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!!

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

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

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