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


960 Comments

Post a comment

Comments pages: 1 8 9 10

  1. Walter Mikes
    Posted on March 9, 2024 at 13:38 Permalink

    Hi, I am using page-scroll-to-id-for wordpress in combination with elementor and hello theme and everything works well.

    I want to start the scroll animation automatically: When the page has loaded, it should scroll smoothly to a certain #id (without clicking a menu or link).

    Can you give me a hint?

    Thank you in advance,
    Walter

    Reply
    • Walter Mikes
      Posted on March 9, 2024 at 13:53 Permalink

      This is the current state of my page (I am still experimenting):

      https://www.energiekueche.at/walter_de/

      I want the page to start scrolling automatically after load as if I clicked on (scroll down).

      Is there an easy solution?

      Thank you in advance,
      Walter

      Reply
    • malihu
      Posted on March 9, 2024 at 15:54 Permalink

      Hello Walter,

      You can do this with few lines of javascript. Add the following to your theme/child-theme functions.php:

      function ps2id_custom_script(){ wp_register_script( 'ps2id-custom-script', '', array('jquery', 'page-scroll-to-id-plugin-script'), '', true ); wp_enqueue_script( 'ps2id-custom-script' ); wp_add_inline_script( 'ps2id-custom-script', '(function($){ $(window).on("load",function(){ var idToScroll="#werke"; if($(idToScroll).length && !window.location.hash){ setTimeout(function(){ if(!$(window).scrollTop()) $.mPageScroll2id("scrollTo",idToScroll); },100); } }); })(jQuery);'); } add_action( 'wp_enqueue_scripts', 'ps2id_custom_script' );

      Let me know if it works 🙂

      Reply
    • malihu
      Posted on March 9, 2024 at 16:07 Permalink

      Alternatively, if you always want the the page to auto-scroll to the target, even if the user has already scrolled the page, you don’t need the extra javascript. You can simply add the class ps2id-auto-scroll to the target element you want to scroll to (in your case the #werke element).

      Reply
      • Walter Mikes
        Posted on March 11, 2024 at 02:31 Permalink

        Dear malihu,

        thank you so much for this information. The simple solution with class ps2id-auto-scroll does exactly what I wanted – as you can see here:

        https://www.energiekueche.at/walter_de/.

        I didnt try out the other solution using javascript/functions.php.

        Best greetings from Vienna, Austria
        Walter

        Reply
        • malihu
          Posted on March 11, 2024 at 04:14 Permalink

          Awesome 🙂 If the class works for you, you don’t need the javascript solution.
          Thanks a lot for the feedback and donation!

          Reply
  2. byron
    Posted on February 7, 2024 at 19:15 Permalink

    Hi there,
    I am using the plugin in combination with WP Bakery. I followed the instructions given here:
    https://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/
    It sort of works, but for some reason on page load it is automatically scrolling the page. For the WP Bakery part, it happens whether I use a button, a plain html link, or the shortcode for the plugin. Is there something I am missing?
    Thanks

    Reply
    • byron
      Posted on February 7, 2024 at 19:27 Permalink

      Don’t worry about it – my mistake was that my browser was not properly refreshing 🙂

      Reply
  3. lenacenter
    Posted on January 27, 2024 at 13:26 Permalink

    This code still works and there is no problem?

    Reply
  4. تاپ 10
    Posted on January 27, 2024 at 13:24 Permalink

    This is exactly what I needed. Thank you

    Reply
  5. Matthew Murray
    Posted on January 9, 2024 at 03:50 Permalink

    Hi, I’m trying to use your plugin, before I added the plugin clicking a button would jump to the section I want now after adding the plugin it only scrolls back to the top when the button is clicked. I have tried searching the forum but can’t seem to find out why I’m having this issue.
    Any help would be greatly appreciated thank you.

    Reply
    • malihu
      Posted on January 10, 2024 at 15:43 Permalink

      Hello,

      Please post your page with the issue and which link(s) to click to test this so I can check what happens. Usually, you need to match your link’s URL with the URL you see on the browser’s address bar, e.g. make sure you use http/https, www etc.

      Reply
      • Matthew Murray
        Posted on January 14, 2024 at 09:09 Permalink

        Page is as follows
        https://www.hiitnation.com.au/?page_id=200
        Link is any one of the book birthday now buttons

        Reply
        • malihu
          Posted on January 14, 2024 at 18:49 Permalink

          There’s an error in your document’s HTML which causes the issue (among others). The document begins with:

          <!--<!DOCTYPE html> <html lang="en"> -->

          It should begin with:

          <!DOCTYPE html> <html lang="en">

          i.e. for some reason doctype and html tags got commented resulting in invalid HTML. Correcting this will fix all related issues.

          Let me know

          Reply
  6. Marios
    Posted on December 18, 2023 at 21:49 Permalink

    Hi,

    i am using Essential Grid on a container, i insert it using shortcode, Looks like it does not recognize it’s length/height, so all the above menus get active much earlier. Any idea how to solve that?

    i have tried these:

    Allow only one highlighted element at a time
    Keep the current element highlighted until the next one comes into view
    Highlight by next target

    but without effect.

    regards

    Reply
    • malihu
      Posted on December 19, 2023 at 12:55 Permalink

      Hi,

      Instead of using the shortcode or target blocks, give the overall/wrapper container the ID you want. Does Essential Grid provide an ID field for its elements?

      Reply
  7. Michael Nixen
    Posted on December 5, 2023 at 16:44 Permalink

    Hey there,

    I created onepage homepage. I used “pAge to Scroll id” to help me with navigation. When you scroll down, the area you are scrolling over, automatically changes its background color in the menu. So far that is working. The only thing, thats making it look not as nice is, that once you scroll the active menu item’s background disappears. When you stop, then its coming back.

    I tried all settings and checkboxes, decreased the animation time to 1ms….

    Nothing seems to work.

    If checked the checkbox on this setting of course:

    Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)

    Here is a Video I made to show the issue

    Hope some has an idea for me, so that the active menu item background color stays the same, until I reach a new section….. also turn off any kinf of animation.

    Looking forward hearing from you

    Greetings

    Michael

    Reply
  8. brandt attema
    Posted on November 4, 2023 at 23:22 Permalink

    Dear reader, I am using your page-scroll-to-id to scroll down from the logo to the beginning of the text on every page, since our logo is a bit ‘high’.

    Now, I made it work on every page, but the ‘homepage’ does not want to work. When you enter the website url it does not scroll, afterwards if you push the ‘home’ button on the menu it does scroll, Somehow the home page does not have a place where I can refer to the page-scroll-to-id spot on the page. Would you know how I could fix that?

    If my question makes any sense, I hope you can help me find the spot where I can also assign the home page to scroll to the right spot. Thank you in advance! best regards, brandt attema

    Reply
    • malihu
      Posted on November 7, 2023 at 01:36 Permalink

      Hi,

      The URL for the homepage should be:

      https://stichtingbeertje.com/#Thuis

      If you enter the URL above, the page will scroll to the content. This URL should also be on the logo itself.

      Let me know if this helps

      Reply
  9. Alex
    Posted on October 30, 2023 at 18:27 Permalink

    Hi,
    now it’s working. Sorry for my long mail.

    One question?
    Can i change for example the font-color? or only the background?

    Thanks for your reply.

    Reply
    • malihu
      Posted on October 31, 2023 at 14:04 Permalink

      Sorry, can’t find your email. Can you describe the issue or resend it?

      Reply
  10. Sheree Walker
    Posted on October 19, 2023 at 16:03 Permalink

    Hi there,

    I am using your plugin and it’s great – but for some reason, when scrolling to anchor links from another page, the content flashes before it takes effect and looks quite bad.

    I have tried setting delays and all sorts off stuff, but nothing seems to fix it.

    I removed all my custom JS and CSS but that didn’t help either.

    I can’t post the URL in here but I could in an email.

    Thanks in advance!
    Sheree

    Reply
    • Sheree Walker
      Posted on October 19, 2023 at 16:06 Permalink

      I’m really sorry – I should have searched this forum first. I added that js code you posted to someone else to the footer and it worked.

      Thanks so much
      Sheree

      Reply
      • malihu
        Posted on October 19, 2023 at 20:57 Permalink

        No problem. Glad you found the solution 🙂

        Reply
  11. Sydney
    Posted on October 3, 2023 at 07:34 Permalink

    I’m using the shortcodes and the target is always highlighted, even before the link is clicked. The link and target are on the same page, if that matters. How do I prevent a target from being highlighted until its link is clicked?

    Reply
    • malihu
      Posted on October 3, 2023 at 15:27 Permalink

      The highlight you see most likely comes from the theme. Can you post your site/page URL so I can check it?

      Reply
    • malihu
      Posted on October 4, 2023 at 18:56 Permalink

      The highlight feature of the plugin highlights the targets when they are within the viewport (while the page is being scrolled), not when they get clicked. That’s why they seem to always be highlighted (they are within the viewport).

      To have the target sections on different background only when the links get clicked you need to add some extra javascript in your page/template. Can you do this?

      If yes, you can add for example the following in your theme/child-theme footer.php right above the closing body tag:

      <script> (function($){ $(function(){ $("body").on("click",".__mPS2id",function(){ var $this=$(this), $href=$this.attr("href"), $idx=$href.indexOf("#"); if($idx !== -1){ $(".mPS2id-target-clicked").removeClass("mPS2id-target-clicked"); var $hash=$href.substring($idx + 1); $("#"+$hash).addClass("mPS2id-target-clicked"); } }); }); })(jQuery); </script>

      I can also give you a PHP code if you want to add the script in your theme/child-theme functions.php.

      Let me know

      Reply
    • malihu
      Posted on October 4, 2023 at 18:59 Permalink

      If/when you add the custom script, you can then use the class mPS2id-target-clicked in your CSS to style the target:

      .mPS2id-target.mPS2id-target-clicked { background: #ff0; }

      Just remember to remove the .mPS2id-highlight CSS you’ve added.

      Reply
      • Sydney
        Posted on October 4, 2023 at 22:56 Permalink

        Thank you so much for your help! This works perfectly.

        Reply
        • malihu
          Posted on October 5, 2023 at 14:34 Permalink

          You’re welcome, glad I helped!

          Reply
  12. Dawn
    Posted on September 2, 2023 at 20:16 Permalink

    Hi all:

    I’m using the css offset option to try to set a different offset on smaller screens. It does not appear to be working at all…so I change the height in pixels but there is no change.

    This client is very picky. Is there a fix for this issue?

    @media only screen and (max-width: 1200px) {

    #ps2id-dummy-offset {
    height: 100px !important;
    }
    }

    Reply
    • malihu
      Posted on September 3, 2023 at 14:41 Permalink

      Hello,

      Go to plugin settings and set the “Offset” option value to:

      #ps2id-dummy-offset

      Save settings, test and let me know.

      Reply
  13. Arhon
    Posted on August 31, 2023 at 20:16 Permalink

    The plugin is not working on iPhone. Was showing my client and he has an iPhone 13. Are there any settings I can change to fix this? or is this a bug?

    Works on Android and other desktop bowsers tested.

    Reply
    • malihu
      Posted on August 31, 2023 at 23:26 Permalink

      The plugin is platform agnostic and works the same everywhere. I checked your page and you need to change your link’s URL in order to match your web server configuration which requires the trailing slash. So, you need to change your link “Quick Quote” link URL from:

      https://abbeyprintconsultancy.uk/services#quick-quote

      to:

      https://abbeyprintconsultancy.uk/services/#quick-quote

      and it’ll work as it should.

      Let me know

      Reply
  14. Eric
    Posted on August 20, 2023 at 18:29 Permalink

    The Scrolling Offset setting doesn’t seem to be working.
    No matter what figure I put in there, the scroll result places the page at the place I want, but not a little bit lower on the page, that I desire.
    I am sure it used to work before, as I remember using the Offset setting sucessfully.

    Reply
    • Eric
      Posted on August 20, 2023 at 18:57 Permalink

      Sorry, I checked my page style and it was using blocks.
      I have adjusted the block with a offset and it is now OK.
      Thanks for a great plugin.

      Reply
  15. Gary
    Posted on July 10, 2023 at 19:12 Permalink

    I read the earlier comment about flashing before the smooth scroll begins. I added the js snippet as advised, but I still seem to be experiencing the “flash.” I love this plugin and really want to keep using it. But is there anything else that can be done about this? Thanks in advance.

    Reply
    • malihu
      Posted on July 11, 2023 at 01:50 Permalink

      It seems that your web server redirects all non-www requests to the www subdirectory. Simply add the www part in all of your links URL. For example, change your “Jazz Stuff” link URL from:

      https://absintheteez.com/#products

      to:

      https://www.absintheteez.com/#products

      Reply
      • Gary
        Posted on July 12, 2023 at 13:56 Permalink

        Perfect! Worked like a charm. Thanks so much for the help.

        Reply
        • malihu
          Posted on July 12, 2023 at 14:31 Permalink

          You’re welcome 🙂 Thanks for the feedback.

          Reply
  16. Eyup
    Posted on June 23, 2023 at 16:18 Permalink

    Hello,
    I have a menu with more then 10 items and it’s overflow:hidden. My question is how to jump to hidden items by scrolling page. at this moment hidden menu items not showing correctly.

    Reply
    • malihu
      Posted on June 23, 2023 at 18:06 Permalink

      Hello,

      This functionality will need custom javascript development (I’ve done similar things for various websites). If you’re interested and want me to give you a quote, send me an email 🙂

      Reply
      • eyup
        Posted on June 27, 2023 at 09:37 Permalink

        can you check your email please

        Reply
  17. Fred
    Posted on June 14, 2023 at 09:47 Permalink

    Is it possible that when a visitor enters a page that the scroll will be activated and passes the header?

    Best regards, Fred.

    Reply
    • malihu
      Posted on June 14, 2023 at 15:16 Permalink

      It’s possible with a few extra javascript lines. Can you add custom js to your theme/template? If yes, post your page/site URL so I can give you the code to add.

      Reply
      • Fred
        Posted on June 19, 2023 at 15:20 Permalink

        Thnx, I have allready solved it with another javascript for scrolling.
        Greetings Fred.

        Reply
  18. Ewen
    Posted on June 13, 2023 at 06:38 Permalink

    hi
    I already deactivated the plugin but still getting this error Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)
    at w (page-scroll-to-id.min.js?ver=1.7.7:2:14272)
    at page-scroll-to-id.min.js?ver=1.7.7:2:20475

    Please advise. Thanks

    Reply
    • malihu
      Posted on June 13, 2023 at 15:36 Permalink

      Hi,

      I just tested your page (babyup.co.uk) and I don’t see the console error. Perhaps it was a caching issue?

      Reply
  19. Jim Hitch
    Posted on May 23, 2023 at 17:24 Permalink

    Love the plugin!

    Getting a weird flashing / jump effect sometimes.

    For example, if I got to

    https://www.casedo.com/insights/barriers-to-improvement/current-legal-document-workflow-management-isnt-working/

    and scroll down to the bottom of the page and cilck ‘sign up now’, it’s meant to take me to the home page and then scroll down to the pricing block, instead it kind of flashes before scrolling, or even scrolls down twice.

    Please help!

    Jim

    Reply
    • malihu
      Posted on May 24, 2023 at 03:17 Permalink

      Hello,

      Scrolling to a different page can be tricky as it depends on a lot of things (CSS, page layout, caching, browser engine etc.) and sometimes is not as exact or accurate as when scrolling within the same page.

      Can you add some extra javascript to your template? If yes, the following code should probably fix the issue.

      You can add the script below in your theme/child-theme footer.php right before the closing body tag (</body>). Alternatively, you can add it in a custom javascript field if your theme (or some other plugin) provides one (without the script tags!).

      <script> (function($){ if(window.location.hash){ var elem=$(window.location.hash); elem.css("display","none"); $(window).on("load",function(){ elem.css("display","block"); }); } })(jQuery); </script>

      Let me know if this helps

      Reply
      • Jim Hitch
        Posted on June 7, 2023 at 20:10 Permalink

        Hi. Apologies for the late response, I’ve been away at the beach!

        I’ve added the script and it does appear to be a little better, though the flashing does still occur.

        But definitely an improvement, so many thanks for that.

        If you have any other suggestions, it’d be great to hear them.

        Regards

        Jim

        Reply
        • malihu
          Posted on June 8, 2023 at 15:31 Permalink

          No problem. You just need to place the script further down the code. This is because you’re loading the jQuery library later.
          How did you add the script? Can you move it after jQuery library inclusion (e.g. in the footer.php like I described)?

          Reply
      • Daniel
        Posted on November 15, 2023 at 07:43 Permalink

        This worked for me! Thank you!

        Issue was that the page would load right to the section that is defined. But then the animation would start and scroll back to the defined anchor.

        Reply
  20. Kuba
    Posted on May 18, 2023 at 19:34 Permalink

    Hallo
    Manos and other good people My site is still under development.
    Plese forgive my english and forgive that im probably absolute morron.
    Top Menu on my site was a dark grey one. Now when i replaced my default site menu with cuscutom links.
    All of my menu is light grey. I know thats a default behavior of clicked links wp twentyseventeen.
    But I would like to my menu stay the same color as it was before. (clicking menu does not affect color).
    How to prevent link color change in this particular part of site.

    I will be greatfull for any clues
    Have great day everybody

    Kuba

    Reply
    • malihu
      Posted on May 19, 2023 at 01:40 Permalink

      Hello,

      Can you post your site URL? It’s impossible to tell you what CSS rules to apply without seeing your menu.

      Reply
      • kuba
        Posted on May 23, 2023 at 23:58 Permalink

        Im an idiot i watch your tutorial video carefully now everything is clear as day.
        Sorry for bother you.

        Have a great day

        Reply
        • malihu
          Posted on May 24, 2023 at 03:09 Permalink

          No problem 🙂 Let me know if you need more help.

          Reply
  21. Janet Atkinson
    Posted on April 29, 2023 at 01:33 Permalink

    Hello,

    Love your plugin. I have a very long page and when a link to bottom section is click the scrolling is way too fast and ugly. I like to use the plugin for the offset feature and would be happy to turn off the scroll and just have the page fade in (I can do that part). Is there way to turn off scrolling for ‘far distances? or completely?

    Or is there a Javascript code snippet just to set the offset without the plugin?

    Thank you very much for your time!

    Reply
    • malihu
      Posted on May 2, 2023 at 13:05 Permalink

      Hello Janet,

      You can set the “Scroll duration” option in plugin settings to 0. This will effectively disable scrolling animation (i.e. the page will jump to the target).

      Let me know if this is what you need.

      Reply
  22. [email protected]
    Posted on April 22, 2023 at 23:28 Permalink

    I love your plugin and have used it on many of my sites, but for some reason, it’s not easing like it should (no real smoothing at all) on this new install of WordPress. can you help? thanks!!!

    Reply
    • malihu
      Posted on April 23, 2023 at 01:50 Permalink

      Hi,

      Your web server uses SSL (https). Just change your links URL from http to https. For example, change “THE GANG” link URL from:

      http://dirt-media.com/#thegang

      to:

      https://dirt-media.com/#thegang

      and everything should work. Let me know.

      Reply
  23. Pavlo
    Posted on March 6, 2023 at 15:02 Permalink

    Hello, I have an issue, an error screenshot (https://prnt.sc/xk1t47MBdl6E).
    The cause screenshot (https://prnt.sc/7BhE9ZqaXfWU).
    Explanation: the parameter should be a string, but an array is given.

    Could you fix it, please?

    Reply
    • malihu
      Posted on March 6, 2023 at 15:33 Permalink

      Hi,

      This is a known issue which is already fixed in plugin’s development version (see link below) and will be fixed in the next plugin version (1.7.8).

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

      If you don’t want to wait for the next version release, you can use the development version and update to version 1.7.8 when it becomes available (as you normally do).

      Reply
  24. Simon K
    Posted on February 28, 2023 at 13:48 Permalink

    Hi,

    i have a small issue. on the main page the plugin works perfectly.

    But when i am on a sub page like https://endlesscity-records.com/artists/
    and i click on the menu any links (except: home & sub-menus)
    it does not jump back to the main page.

    i am using costume links with #myanchhorID in the menu
    cause if i use the full link (like https://endlesscity-records.com/#myanchhorID), the mainpage doesnt scroll, it first reloads the complete page, and then scrolls from the top to the anchor point.

    any idea?
    Regards,
    Simon

    Reply
    • malihu
      Posted on February 28, 2023 at 15:04 Permalink

      Hi Simon,

      It seems there is another script affecting the links with absolute URLs like https://endlesscity-records.com/#some-id (this script may be part of the theme).

      Try to use the root-relative URL in your links, meaning that instead of https://endlesscity-records.com/, start with a simple / which defines the domain root.

      For example, change your “Releases” link URL to:

      /#releases

      and it’ll work from any page.

      You can do this for any page, like /events-list/#some-id-in-events, /#some-id-in-home etc.

      Reply
      • Simon K
        Posted on February 28, 2023 at 20:08 Permalink

        AMAZING! Works like a charm!

        Thank you soo much.

        Just sent you a Donation to get a Coffee!!! 😉

        Regards
        Simon

        Reply
        • malihu
          Posted on February 28, 2023 at 20:17 Permalink

          Thank you! Glad I helped 🙂

          Reply
  25. Howard Kaufman
    Posted on February 26, 2023 at 02:18 Permalink

    I had been using the page-scroll-to-id plugin on my website without any problems.

    My website went down and when I contacted BlueHost, they said my page-scroll-to-id plugin was casuing a conflict and needed to be disabled.

    Any suggestions on if/how I can reactivate this plugin without crashing my BlueHost hosted website?

    Thanks for any suggestions.

    Reply
    • malihu
      Posted on February 26, 2023 at 02:34 Permalink

      Hi,

      I’ve never got any issues with BlueHost (or any other hosting tbh).

      You need to ask them or find what the error was.

      Also if you changed something before your site went down.

      Does reactivating the plugin cause the site to go down? If yes, what error do you get? Is PHP debug enabled?

      Reply
      • Howard Kaufman
        Posted on February 26, 2023 at 04:00 Permalink

        I can not reactivate it, when I try I get the following error message:
        We were unable to switch the status of Page scroll to id. Please try again.

        Reply
        • Howard Kaufman
          Posted on February 26, 2023 at 04:11 Permalink

          Could there be a conflict becasue I am also using BeTheme?
          I had been usingJetPack to monitor my site usage right before my site crashed.
          Could the conflict be realted to JetPack?

          Reply
          • malihu
            Posted on February 28, 2023 at 00:04 Permalink

            Can’t say for sure (I’ll try making some tests).

            Can you try the following?

            Firstly, delete “Page scroll to id” in wp admin plugins page.
            Download plugin’s development version:
            https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
            Upload and activate it.

            Let me know if it works.

          • Howard Kaufman
            Posted on March 2, 2023 at 20:56 Permalink

            Thanks for the suggestion.
            I think the problem is a conflict with BeTheme.
            I will have to figure out another solution.
            Thanks.

  26. betti
    Posted on February 1, 2023 at 14:25 Permalink

    Same on my website, if I updatet to PHP 8.0. I solved problem same way.

    Reply
  27. Ida
    Posted on January 12, 2023 at 15:09 Permalink

    updating to version 1.7.7 caused an error – so there is a bug on your update.

    I downloaded and replaced it with the previous version 1.7.6 – and it solved the problem.

    Reply

Comments pages: 1 8 9 10

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