This website uses cookies to personalise ads and to analyse traffic ok
web design

Page scroll to id for WordPress

Page scroll to id is a fully featured WordPress plugin for creating links that scroll the page smoothly to any id within the document. The plugin replaces browser’s “jumping” behavior with a smooth scrolling animation, when links with href value containing # are clicked.
It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like: adjustable scrolling animation duration and easing, link and target highlighting via ready-to-use CSS classes, vertical and/or horizontal scrolling, scrolling from/to different pages etc.

Get started

The plugin works by “connecting” links with href/URL in the form of #my-id or http://my-site.com/page/#my-id to sections/elements within the document with an equivalent id attribute value (e.g. <div id="my-id">...</div>). Clicking such links will scroll the page smoothly to their target id position.

Get started by creating or setting-up your links. The plugin is enabled by default on WordPress Menu links (created in Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to (e.g. #my-id, /page/#my-id, http://my-site.com/page/#my-id etc.).
You can use id values that already exist in your theme or you can create your own id targets using plugin’s “Insert Page scroll to id target” button in wp post visual editor or the [ps2id] shortcode (e.g. [ps2id id='my-id'/]).

To create links within your content, use plugin’s “Insert/edit Page scroll to id link” button and/or shortcode (e.g. [ps2id url='#my-id']link text[/ps2id]) in wp post visual/text editor.
To enable the plugin on existing links, add the ps2id class or the m_PageScroll2id rel attribute to them, making sure the link’s href/URL value contains a hash (#) with the id of the section you want to scroll-to. In addition, you can simply add your links CSS selector (e.g. .menu-item a, a[href*='#']:not([href='#']) etc.) in “Selector(s)” field in plugin settings.

To highlight your links (or targets), use the classes provided by the plugin in your theme’s stylesheet or custom CSS. The default highlight class is mPS2id-highlight but you can set your own in the “Classes & highlight options”. For example, to style the highlighted link (the link whose target element is considered to be within the viewport), you could add in your CSS:

a.mPS2id-highlight{ 
    background: #ff0; 
}

or

.menu-item a.mPS2id-highlight{ 
    background: #ff0; 
}

for highlighting custom menus links only.

If you have a fixed-positioned/sticky menu which overlaps your target’s content when page scrolling is completed, insert your menu CSS selector or a fixed pixel value in the “Offset” field. For example, inserting #navigation-menu will offset the scroll-to position according to the height/width/position of the element with id navigation-menu. In the same manner, setting the “Offset” value to 100 will offset page scrolling by 100 pixels.

Plugin settings

Selector(s)

Use the Selector(s) field when you need to instruct the plugin to handle specific links. The value(s) should be anchor tags (a, i.e. links) in the form of strings that represent ways of choosing elements in the DOM (i.e. CSS selectors).
Each selector is separated by comma, so multiple selectors can be defined as: selector1, selector2, selector3 etc.

The default selector value is a[href*='#']:not([href='#']), meaning the plugin handles all links that have a valid hash value (e.g. #id) in their URL.
The default selector value prior to version 1.6.3 of “Page scroll to id” is a[rel='m_PageScroll2id'], meaning the plugin handles by default all anchor elements (a) with m_PageScroll2id rel attribute value.

Other selector examples could be: a[href*='#'] (links that contain # in their href/URL attribute), a[href='#my-id'] (links with href attribute value: #my-id), a.className (links with class: className).

To enable the plugin on any link that has a hash (#) in its URL, insert a[href*='#']:not([href='#']) as a single selector.

Other default selectors which the plugin is applied automatically include the class ps2id (actual selectors: .ps2id > a[href*='#'] and a.ps2id[href*='#']). This means that any link with a hash in its URL/href (e.g. #my-id) which has the class or is contained (direct children) within an element with the class ps2id will be handled by the plugin automatically.

To exclude specific links from being handled by the plugin (e.g. special tabs, accordions, toggles etc.), use the selectors are excluded field by adding the element selector(s) you want (separated by comma). The default excluded selectors value is set to: a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link which excludes most links that are used for toggling elements, tabs, accordions etc.

You can add your owns electors to exclude by separating each one with comma (,), for example:
a[href^='#tab-'], a[data-toggle], a.some-class, .tabs a

The option “Enable on WordPress Menu links” (enabled by default) enables the plugin automatically on custom links created in WordPress Menus.

Scroll duration

Scroll animation duration (i.e. scrolling speed) in milliseconds (1000 milliseconds equal 1 second). Lower values equal faster scrolling.

“Auto-adjust scrolling duration” option (enabled by default) lets the plugin fine-tune scrolling duration/speed according to target and page scroll position. This normalizes the animation duration in order to avoid short-distance scrolling taking too long (e.g. a page scroll of just 100 pixels will last shorter than the value specified in “Scroll duration”).

Scroll type/easing

Scroll animation easing type (i.e. the way the animation progresses at different points within its duration).
You can set different easing types according to page scrolling state: one that is applied when the page is idle (no scrolling currently running) and another that applies while page is scrolling (when a link is clicked while the page is animated/scrolling).
Enable “Force scroll type/easing” option when there’s conflict with outdated easing libraries added by themes or other plugins.

Scroll duration and easing demo

Scroll behavior

Always scroll smoothly when reaching the end of the page/document option adjusts scroll-to position so it does not exceed document length. For example, when scrolling to a target element that is at the bottom of the page, the scrolling animation stops smoothly at bottom of the page instead of “breaking” at an earlier point.
Enable Stop page scrolling on mouse-wheel or touch-swipe option if you want to stop page scrolling when the user tries to scroll the page manually (e.g. via mouse-wheel or touch-swipe).
Enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option, will auto-correct scrolling if the target’s position was changed while the page was scrolling. This event will fire one time only after scrolling animation is complete. This option is useful when document’s length changes according to scroll (for example when a menu becomes sticky after scrolling down the page and its previous state space gets zero).
Enable “Extend target position verification and scrolling adjustment for lazy-load scripts (images, iframes etc.) and changes in document’s length” when dealing with lazy-loaded images and iframes, changes in document’s length etc.

Page layout

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

Offset

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

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

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

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

The plugin can generate automatically a hidden element that can be used as the offset selector. If you enable Auto-generate #ps2id-dummy-offset element option, you can use the #ps2id-dummy-offset as the “Offset” option value and then in your CSS by giving it a height equal to the amount of offset you want.

For example, say you want to have an offset of 100 pixels on desktop and 50 pixels on smaller screens (i.e. mobile). You should enable the Auto-generate #ps2id-dummy-offset element option, set the value #ps2id-dummy-offset in the “Offset” option field and add the following to your CSS:

#ps2id-dummy-offset{
  height: 50px;
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    height: 100px;
  }
}

Highlight selector(s)

The matching set of elements (i.e. selectors) handled by the plugin, that will be eligible for highlighting. The value(s) should be anchor tags (a, i.e. links).

The plugin highlights by default all the links it handles. Using this field, you can specify which links should be highlighted and exclude the rest.
For example, assuming you have various links that scroll the page (e.g. menu links, back-to-top etc.) and you want only the menu links to get highlighted, you could insert:
.menu-item a[href*='#']

Classes & highlight options

The plugin adds special classes to the links and the target elements it handles when the following happen:

  • When a link is clicked, it gets the mPS2id-clicked class.
    You can change this class name to your own and you can use it in your CSS to style the clicked link. For instance:
    .mPS2id-clicked{ 
        background: #ff0; 
    }
    
  • When a link’s target element is within the viewport (i.e. visible on the screen), the link gets the mPS2id-highlight class and the target element gets the mPS2id-target class.
    You can change these class names to your own and you can use them in your CSS to style the highlighted link and target. For instance:
    .mPS2id-target{ 
        background: #ff0; 
    }
    
    .mPS2id-highlight{ 
        background: #ff0; 
    }
    

In addition, the plugin will add the above highlight classes with the -first and -last suffix (e.g. mPS2id-highlight-first, mPS2id-highlight-last) in order to differentiate multiple highlighted elements. This is useful when you need to style only the first or last of the highlighted links or targets in your CSS.
For example, if multiple links are highlighted at the same time, instead of using .mPS2id-highlight in your stylesheet, you could do:

.mPS2id-highlight-first{ 
    background: #ff0; 
}

An alternative way of restricting highlight to a single link/target and prevent multiple elements from being highlighted at the same time, is to enable Allow only one highlighted element at a time.

There are times when you need to keep at least one element (e.g. a menu link) always highlighted. Enable Keep the current element highlighted until the next one comes into view option if you need such functionality/behavior and your template/page is laid out in a way that at certain scrolling points there are no target sections visible on the screen (no links highlighted).

Enable Highlight by next target option when your target elements have zero height/width to improve highlighting behavior. This option is useful when you add id targets in your content via plugin’s buttons or the [ps2id id='some-id'/] shortcode, as it extends the scrolling range at which an element stays highlighted.

Disable plugin below

Set the viewport/screen-size in pixels, below which the plugin will be disabled. The value can be width or width,height.
For example, insert 1024 to disable plugin’s functionality when the viewport/window width is 1024 pixels or less. Insert 1024,600 to disable plugin when viewport width is 1024 pixels or less and viewport height is 600 pixels or less.
Please note that the values entered will match CSS media queries.

Leaving the field value empty or 0 (default) disables the option.

Administration

Check Display widgets id attribute in order to show the id attribute of each widget in Appearance → Widgets. This is a convenient way of finding existing id values in order to use them as links targets.
You can also create your own id targets in widgets via the “Page scroll to id target” widget.

Enable insert link/target buttons in post visual editor activates plugin’s buttons in WordPress visual editor toolbar. You can use these buttons to insert links and id targets in your content.

Advanced options

If another plugin or a theme script handles page scrolling and conflicts with “Page scroll to id”, try enabling Prevent other scripts from handling plugin’s links option. This option attempts to remove (on-the-fly) javascript click events by other scripts from the links. Please note that this might not work on some themes or plugins, as it depends on the way those scripts are attaching the link events.
You may set a specific selector for the option above using the Prevent other scripts from handling plugin’s links selector(s) field (it’s recommended to set a specific selector when using the “Prevent other scripts from handling plugin’s links” option).

Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.

Enable Encode unicode characters on links URL when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL (for proper highlighting of links).

wp-config options

define('PS2ID_MINIFIED_JS', false);
Use the PS2ID_MINIFIED_JS constant (permanent global variable) in wp-config.php to select which script files will be loaded on the front-end by the plugin. Adding the above in wp-config.php instructs the plugin to load the non-minified/development version of its scripts.


Build pages visually on the front end of your website

You’ve never built a WordPress website like this before. Divi by elegant themes is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike, giving you the power to create spectacular designs with surprising ease and efficiency.
Learn more about Divi

Divi WordPress Theme Monarch Social Sharing Plugin


Plugin shortcodes

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

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

Attributes

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

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

    [ps2id url='#some-id' class='ps2id-speed-400']link text[/ps2id]
    [ps2id url='#some-id' class='ps2id-speed-1300 class-a class-b']link text[/ps2id]
    
  • aria-label (optional) – Link aria-label attribute
    Examples:
    [ps2id url='#some-id' aria_label='Some text here']link text[/ps2id]
    

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

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

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

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

Attributes

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

Previous versions

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

Pages: 1 2


1,003 Comments

Post a comment

Comments pages: 1 3 4 5 6 7 11

  1. RIzvan
    Posted on June 1, 2019 at 07:27 Permalink

    I have made menu module in divi and there I have used one of the menus created from appearance. I have added the css ID in the divi sections and used thoese ID in the custom links for the menu. So without your plugin if i click a menu tab my one page website scrolls to that particular section automatically. its built in wordpress feature. But I am trying to use your plugin to be able to use your scrolling animations , but its not working . if possible please have a check .

    Reply
  2. [email protected]
    Posted on May 30, 2019 at 17:05 Permalink

    Hi there, asking some help solving my problem using Page scroll to id plugins it doesn’t work properly on my test website, thank you.

    Reply
    • malihu
      Posted on May 31, 2019 at 01:43 Permalink

      Hello,

      Please post your URL to check it and help if I can.

      Reply
  3. ohwow
    Posted on May 23, 2019 at 21:59 Permalink

    Hi there, awesome work. Is there a way to disable the plugin on specific IDs? I have a page with horizontal tabs and the link doesn’t work on them
    Thank you 🙂

    Reply
    • malihu
      Posted on May 23, 2019 at 22:34 Permalink

      Hi,

      Not sure what you need but you can use the excluded selectors field in plugin settings to set your own selector(s) that should not be handled by “Page scroll to id”.

      The plugin does not prevent other scripts (like tabs) from working, so I’m not sure if this is what you need.

      Reply
      • ohwow
        Posted on May 24, 2019 at 01:12 Permalink

        Thank you very much for your support. Best.

        Reply
  4. korn
    Posted on May 23, 2019 at 20:27 Permalink

    Hi, malihu

    Please help to check site : https://wordpress-255288-824400.cloudwaysapps.com/.

    Why when I click menu it scroll down and up ? Can setting only scroll down ?

    thanks

    Reply
    • malihu
      Posted on May 23, 2019 at 22:46 Permalink

      Hi,

      The issue you’re having is not caused by “Page scroll to id”. It is caused by this Elementor script:

      ...plugins/elementor/assets/js/frontend-modules.min-2.5.15.js

      Try this:
      Go to “Page scroll to id” and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your links.

      Reply
  5. Tomas
    Posted on May 17, 2019 at 12:56 Permalink

    When I click the menu Item “Get A Free Quote” nothing happens. The url just says this: https://viptruckrepair.com/#home_text_custom_width-3

    When I click it, its supposed to scroll to a widget that says: Get a free repair quote // Write to us (and also has a contact 7 form).

    I already did all this:
    Selector(s)” option value is: a[href*=#]:not([href=#])
    Enable insert link/target buttons in post visual editor
    Prevent other scripts from handling plugin’s links
    Normalize anchor-point targets

    Any Idea of what might be happening?

    The theme is Carpress by https://www.proteusthemes.com/wordpress-themes/carpress/

    Reply
    • Tomas
      Posted on May 17, 2019 at 12:59 Permalink

      forgot to say that I tried it with different widgets…

      Also, the Page scroll to id target for the widget is the following: home_text_custom_width-3

      Reply
    • malihu
      Posted on May 18, 2019 at 07:49 Permalink

      I checked your page and there’s no target with id home_text_custom_width-3

      I viewed the page source and the “Get a free repair quote” has no id attribute. I think that the theme does not apply the widget id attribute at all (i.e. it ignores ids on widgets).

      Maybe you can use the “Page scroll to id target” widget to set the target? Or perhaps use plugin’s shortcode (e.g. [ps2id id='home_text_custom_width-3'/]) to set the target within your widget content (if the theme allows shortcodes in widgets)?

      Reply
  6. ogertg
    Posted on May 15, 2019 at 17:01 Permalink

    Dear Malihu,

    I am dealing with an error, after the page scrolls to the selected ID, it Scrolls back on top.

    Can you help me please?

    All the best
    Ogi

    Reply
  7. [email protected]
    Posted on May 15, 2019 at 17:00 Permalink

    Dear Malihu,

    I am dealing with an error, after the page scrolls to the selected ID, it Scrolls back on top.

    Can you help me please?

    All the best
    Ogi

    Reply
    • malihu
      Posted on May 16, 2019 at 10:14 Permalink

      Hi Ogi,

      Please tell me which link to click and which page to go to test this.

      Reply
  8. Chris
    Posted on May 13, 2019 at 20:49 Permalink

    Plugin was working correctly when initially installed. Now, there is no smooth scrolling. When the menu item is clicked on, it jumps directly to the section.

    aspencommercialba.com

    Reply
    • malihu
      Posted on May 13, 2019 at 21:33 Permalink

      Not sure if/what was has changed but try this:

      Go to plugin settings and change the “Selector(s)” option value from:

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

      to:

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

      Let me know

      Reply
      • Chris
        Posted on May 14, 2019 at 16:30 Permalink

        That did it. Working perfectly again. Thank you very much!!

        Reply
  9. Beth
    Posted on May 10, 2019 at 18:00 Permalink

    Hi,
    Thank you so much. This plugin is most awesome!
    I wonder if you can help me with a problem I have with highlighting on this site: http://standingtall.net/
    There are sections for mobile which I have to hide on desktop (and visa versa). The links for all of the sections are contained in one primary menu and the links not relevant to that size screen are hidden using css class and display: none.
    On desktop the last 2 links do highlight correctly (contact and about) but the others fail.
    If I remove this from my custom css then it works:

    @media only screen and (min-width: 981px) {
    div.et_pb_section.display-on-mobile {
    display: none;
    }
    }

    But I don’t want to remove that 🙁
    Any ideas how I can get round this?
    Thank you
    Beth

    Reply
    • malihu
      Posted on May 10, 2019 at 18:12 Permalink

      Hi,

      Please disable the “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target” options. Save changes and let me know so I can check what happens.

      Reply
      • Beth
        Posted on May 17, 2019 at 14:49 Permalink

        That has solved it. Thank you so much. SO great to use a well supported plugin. I appreciate your work. Thanks 🙂

        Reply
  10. Martin
    Posted on April 29, 2019 at 20:53 Permalink

    Hello,

    where can I find the selectors are excluded field?

    I want to prevent the scroll funktion on an tab slider.

    Thank you
    Martin

    Reply
    • malihu
      Posted on April 29, 2019 at 21:46 Permalink

      Hi,

      This option will be part of the next plugin version (1.6.5) which will be released very soon. You can download plugin’s development version right now, which has already this option (among others) implemented:

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

      Replace your current “Page scroll to id” plugin with the one above and you’ll get all the latest options. You’ll be able to update to version 1.6.5 (when released) as you normally do.

      Reply
  11. Jeff
    Posted on April 25, 2019 at 19:33 Permalink

    Hello- I just figured out how to configure ” page scroll to ID “….When on different pages and clicking on the “products scroll button” in the header, the screen has a jerky motion and flashes the desired landing area once, then a second time when it lands on it..Can someone please let me know why that is doing that?

    Thanks!

    Jeff

    Reply
    • jeff
      Posted on April 25, 2019 at 19:34 Permalink
    • malihu
      Posted on April 25, 2019 at 19:47 Permalink

      Hi,

      Your link URL does not match the site’s URL. Your site uses https and redirects all www requests. Change the link URL from:

      http://www.vetorthopedicproducts.com/#view

      to:

      https://vetorthopedicproducts.com/#view

      or simply:

      /#view

      Reply
  12. Blue
    Posted on April 20, 2019 at 02:03 Permalink

    Is it possible to create horizontal scrollings pages? Working with WordPress and Elementor I can’t figure out how to do anything but scroll vertically. Changing the option from “Verticle” to “Horizontal” stops it from doing anything.

    Reply
    • malihu
      Posted on April 20, 2019 at 02:19 Permalink

      The plugin does not create horizontal themes or templates. The “Layout” option simply tells the plugin script what the page layout is.

      You need to find and use a horizontal layout WordPress theme (either free or premium) or hire a web developer to create such theme for you.

      Reply
  13. Baris Soref
    Posted on April 17, 2019 at 15:44 Permalink

    Hi,
    I’ve setup the plugin. Set the main menu and ID’s. But i can’t get any scrolling effect?
    I couldn’t figure out why it is not working? Could you help me about this issue?
    My web site is: http://patricefransez.com

    Reply
    • malihu
      Posted on April 17, 2019 at 17:12 Permalink

      Hi,

      I can’t find any links in your page(s) that point to id targets. Your menu links all go to different pages.

      Did you create menu links that point to page targets, like described in the tutorial?

      Reply
  14. easyictcare
    Posted on April 11, 2019 at 15:42 Permalink

    I dont want to scrolling effect for home page tab… Tab does not wrok.. please can you help me…

    http://tadcobuilt.com/gpa/

    http://www.awesomescreenshot.com/image/3968202/d48aab7412e1b1ec88999fa7a74011d5

    Reply
  15. Wolfy
    Posted on March 26, 2019 at 14:25 Permalink

    Hi,
    is scroll to id plugin gdpr compliant?
    Have a nice day Wolfy

    Reply
  16. [email protected]
    Posted on March 26, 2019 at 13:05 Permalink

    Hi Is it normal that the scroll always starts from the beginning of the page? is there an option that allows the scroll to start from where it is located? that is, if I’m already at the half of the page and I click on a menu item that corresponds to a section that is lower down, the scroll should only go down, but at the moment with my options the scroll goes up first to the top and then goes down to the entry corresponding. thanks in advance

    Reply
    • malihu
      Posted on March 26, 2019 at 18:17 Permalink

      No it’s not normal unless your links URL point to a different page.

      Make sure your links URL match exactly the URL you see in browser’s address bar. For example, check if you’re using www, https etc.

      If I could see your page I’d be able to check what happens and provide an exact solution.

      Reply
  17. L Ethier
    Posted on March 26, 2019 at 05:25 Permalink

    Everytime I update a page that uses this plug-in, the plug-ins code is removed and I have to reinsert it. Thankfully I only have reference to three anchor links so it does not take much time but it is extremely annoying.

    Reply
    • malihu
      Posted on March 26, 2019 at 18:13 Permalink

      The plugin does not remove (or add code) by itself. It does not update posts or pages.

      I don’t know how you add the plugin links and/or targets and what page builder you’re using (or if you’re using one). Can you please provide more info?

      Reply
  18. Namit Behl
    Posted on March 18, 2019 at 21:15 Permalink

    Hi,

    I am facing issue with the sections its jumping to another section instead of one clicked.

    Please let me know i have implemented it on home page 2nd services tab.

    Can you please suggest the solution

    Reply
    • malihu
      Posted on March 20, 2019 at 16:16 Permalink

      Hi,

      It seems that the page jumps to the correct position. You’ve placed the targets above the “GET QUOTATION” button and this is where the page scrolls.

      I’m not sure how you want ti to work but if you want the page to scroll to the section title, you should move the target to the title or above the title (instead of quotation button).

      In addition, you could also use the .moto_header_wrapper selector as offset.

      Hope this helps

      Reply
      • Namit Behl
        Posted on March 24, 2019 at 11:42 Permalink

        Hi The code is posted above get quotation button still it takes to button

        Reply
        • malihu
          Posted on March 25, 2019 at 21:08 Permalink

          This is what I see:

          -I click “MOTIVATIONAL JAMM SESSIONS” (#mjs link).

          -The new page loads and it scrolls to mjs target.

          The mjs target is exactly above the “GET QUOTATION” button.

          Another example:

          -I click “LARGE CONFERENCES” (#lc link).

          -The new page loads and it scrolls to lc target.

          The lc target is the first element in the paragraph (below the title).

          Wherever you place the target, this is where the page scrolls.

          If you place the target above the “GET QUOTATION” button, the page will scroll to the button (plus the offset you’ve set).

          If you place the target inside the paragraph, the page will scroll to the paragraph (plus the offset you’ve set).

          If you want the page to scroll to the section title (e.g. “LARGE CONFERENCES”), you need to place the target inside (or above) the title.

          If your page builder allows you to add id attribute on the elements, you can skip creating targets and simply add the id you want on the element itself (e.g. give each title the id you want).

          Reply
  19. Ratko
    Posted on March 14, 2019 at 16:03 Permalink

    Hi,

    I’m having one specific issue, when I use RSS to pull data and send email versions of my WordPress posts, shortcodes which this plugin creates are not hidden. So all ID tags are shown and mess up the look of emails. I don’t see a way to hide them. Do you have any suggestions how can I hide the codes like they are hidden on WordPress posts and only shown in editor?

    Thanks!

    Reply
    • malihu
      Posted on March 14, 2019 at 17:59 Permalink

      Hello,

      This issue is out of plugin’s scope. It has to do with WordPress shortcodes (in general) and what code is used to send the emails. You need to google for a specific solution related to the script/plugin you use to pull the feed and send the emails.

      Reply
  20. Fouz
    Posted on March 13, 2019 at 17:14 Permalink

    Hello,
    I put my site on line, and when i look my site on mobile the links don’t work on home page, just the link for home work.
    In my menu i put custom links for my rubrics like that http://www.instantfleuri.fr/#boutique except for home link http://www.instantfleuri.fr .
    It work on desktop but not on mobile.
    Why? and what can i do?
    Thank you !

    Reply
    • malihu
      Posted on March 13, 2019 at 17:46 Permalink

      Hi,

      Your home page URL is http://www.instantfleuri.fr/en/home-2/. Your links have different URL than your actual homepage.

      For example, your “EN SAVOIR” link URL is:

      http://www.instantfleuri.fr/#boutique

      It should be:

      http://www.instantfleuri.fr/en/home-2/#boutique

      You should either change your links to match your homepage URL or change your homepage URL to http://www.instantfleuri.fr

      Reply
  21. Arthur
    Posted on March 13, 2019 at 12:02 Permalink

    Hello dear Malihu,
    I’m in love with your useful plugin, but I have some problems, it removes somehow the background of my blog, and in one post it made a space to go horizontal (in the cellphone).

    I would be very glad if you could check please what’s the problem , thank you:)

    The post link : (sorry it’s in Hebrew )
    https://saveforyourtrip.com/%d7%9e%d7%94-%d7%9c%d7%a2%d7%a9%d7%95%d7%aa-%d7%91%d7%a0%d7%90%d7%a4%d7%95%d7%9c%d7%99/

    Reply
    • malihu
      Posted on March 13, 2019 at 12:33 Permalink

      Hi,

      I can’t reach your site.

      The plugin does not modify theme and template files in any way. There must be an issue with your CSS.

      Reply
    • malihu
      Posted on March 13, 2019 at 12:41 Permalink

      OK, I just saw your page.

      The close button (with the x icon) of your mobile menu points to the page wrapper id (#page). You’ve set the .mPS2id-target background to be white. So your page wrapper element (#page) gets to be white.

      You need to exclude the #page element from the plugin. Go to “Page scroll to id” settings and change the “Selector(s)” option to:

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

      Save changes and test your page.

      Reply
      • Arthur
        Posted on March 14, 2019 at 17:41 Permalink

        Thank you very much!
        it’s a great plugin,and with a super support, thank you again 🙂

        Reply
        • malihu
          Posted on March 14, 2019 at 17:55 Permalink

          You’re welcome 🙂

          Reply
  22. Tobytwo
    Posted on March 10, 2019 at 15:30 Permalink

    hey,
    great plugin btw.
    1.) I have three links in one site and when i click them via the header menu, the whole site reloads and then jumps to the desired location. Is there a way to just make it jump to the locations without realoading the whole site everytime?
    2.) When one customlink was clicked in the headermenu, all of them turn colors to indicate they have been clicked, even thought I only clicked one.

    Can you give me a hint here please?

    Thank you

    Reply
    • malihu
      Posted on March 11, 2019 at 09:36 Permalink

      Hello,

      1)Make sure your links url matches your actual page url. For example, http vs https, www vs non www etc.

      2)Your links are most likely styled by your theme. This is because most themes style same-page and/or clicked links. If I could see your page I’d be able to tell you how to overwrite the CSS.

      Reply
  23. [email protected]
    Posted on March 8, 2019 at 16:43 Permalink

    This is an awesome plugin, but I seem to be having an issue. If you start from anything other than the ‘home’ link, and click on any other header link, then it works fine, but if you start at ‘home’ and click any other link, it passes the content and backs up to the right position. Please help me. Thanks

    yogabykmom.com

    Reply
    • malihu
      Posted on March 8, 2019 at 20:10 Permalink

      Hi,

      Not sure if you fixed the issue but I cannot reproduce what you describe. When I click on the menu links, the page scrolls to the target as expected(?)

      Reply
      • dave
        Posted on March 9, 2019 at 02:41 Permalink

        I did not fix the issue. I am using chrome, and it only seems to happen when the home link is involved, either navigating to it, or as the starting point. all other links work fine. I tried Edge browser to see if it worked, but it does not scroll at all, just jumps to the section, and overlaps really badly.

        Reply
        • malihu
          Posted on March 10, 2019 at 11:56 Permalink

          When I go to your site I don’t see the same behavior as on your video. The page scrolls correctly. Is there a chance you see a cached version of the page?

          Also, in Edge the page scrolls correctly. You probably had your browser window shrinked and you could not see the smooth scrolling because you’ve set the plugin to disable below 1024×600 pixels.

          Reply
          • Dave
            Posted on March 11, 2019 at 10:51 Permalink

            I did not see that you replied, but my screen is 1366×768, and Edge is maximized, yet it does not scroll.

          • Dave
            Posted on March 11, 2019 at 11:02 Permalink

            I installed the development version of your plugin, and Edge now scrolls. There is still a problem with the offset in Edge, though.

      • Dave
        Posted on March 11, 2019 at 05:48 Permalink

        I downgraded to elementor 2.4.7 and it seems to work in chrome. The Edge overlap problem is probably the sticky navigation, but it still does not scroll, it just jumps right to the anchor, like a regular anchor link would.

        Reply
        • malihu
          Posted on March 12, 2019 at 13:48 Permalink

          The offset in Chrome and Edge is exactly the same for me when I test your page (yogabykmom.com).

          Reply
  24. Jason C.
    Posted on March 5, 2019 at 06:23 Permalink

    Hi, in the latest version of the plug in, it seems like it’s locked to a scroll duration of 800ms. Even when I uncheck Auto-adjust scrolling duration, the number reloads at 800ms. In fact, even if I uncheck Auto-adjust and save without making any other changes, the check mark comes back. Am I missing something? I’d like to make the scroll occur more slowly.

    Thank you for the great plugin!

    Reply
    • malihu
      Posted on March 5, 2019 at 10:48 Permalink

      Hello,

      I cannot reproduce this issue and I haven’t got any similar support requests.

      Do you click the “Save Changes” button after making the changes? What you describe sounds like you’re clicking the “Reset to default” button.

      Can you change other options or does this happen only on Scroll duration options?

      Do you use WordPress multisite?

      Reply
      • Jason C.
        Posted on March 5, 2019 at 14:44 Permalink

        Thanks for the quick reply!

        I am definitely clicking on “Save Changes”.

        The changes stick on other options such as “Enable on WordPress Menu links” and “Normalize anchor-point targets”.

        Yes, I am currently using WordPress Multisite.

        Reply
        • malihu
          Posted on March 6, 2019 at 06:05 Permalink

          It’s because of using WordPress Multisite.

          Did you activate the plugin for the whole network? Are you logged-in as network admin (i.e. super admin)?

          Reply
          • Jason C.
            Posted on March 6, 2019 at 07:21 Permalink

            Yes, I activated for the entire network and have network admin privileges. Is the plugin not compatible with Multisite?

          • Jason C.
            Posted on March 6, 2019 at 07:28 Permalink

            To be clear, the plugin works perfectly other than the scroll duration. Everything else seems to work as designed, and it’s great!

        • malihu
          Posted on March 6, 2019 at 07:57 Permalink

          I see. I can’t really say why this happens right now as I’ll have to make some tests. I’ll post an update here.

          Reply
        • malihu
          Posted on March 6, 2019 at 09:55 Permalink

          Hello again,

          I just made some tests and you definitely found a bug! I’ve just pushed a fix for this issue in plugin’s development version which you can download here:

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

          Please download/install/activate the development version (after deactivating and deleting the current one) and let me know if everything works.

          Reply
          • Jason C.
            Posted on March 6, 2019 at 23:18 Permalink

            Yes, that seems to have fixed the issue. Thank you very much!

        • malihu
          Posted on March 7, 2019 at 08:55 Permalink

          You’re welcome 🙂

          Reply
  25. Joel Mellin
    Posted on February 20, 2019 at 21:04 Permalink

    Hi,

    When I click “Test” in the menu, it takes a very long time before the page scrolls down. It seems like the loading of either the page or the plugin is very long or that it is set to delay the scrolling.

    Reply
    • malihu
      Posted on February 22, 2019 at 18:30 Permalink

      Hello,

      I just checked your page and:

      1)You don’t have “Page scroll to id” installed or activated.

      2)”Page scroll to id” plugin script is 18kb so it loads very fast.

      3)”Page scroll to id” as well as any other plugin of this kind, start functioning after the page and all its assets (images, elements, external sources etc.) is fully loaded. Otherwise clicking a link will scroll to the wrong position.

      4)Your page takes about 1 to 2 minutes to load (which is extremely long) and it seems that the reason is this script:

      https://events.jotform.com/form/51714537543355/...

      You can check the info, time, status etc. of all page assets by opening your page in Google Chrome and have developer tools -> Network tab opened.

      Hope this helps.

      Reply
  26. Aaron Youngren
    Posted on February 14, 2019 at 22:38 Permalink

    I’ve been using this awesome plugin for a year now. That said, it seems like with the latest upgrade to WordPress, the scrolling seems broken. Scrolling from the menu is really clunky, and not smooth at all. I’m sure I’m just missing something. Do you have any idea why that might be happening?

    Reply
    • Aaron Youngren
      Posted on February 14, 2019 at 22:38 Permalink

      Sorry, example is here: https://greatcommissiondesign.us/nlbfcnewton

      Try clicking a menu link.

      Reply
    • malihu
      Posted on February 14, 2019 at 23:08 Permalink

      Hello,

      This is not about some upgrade. You have another plugin (mobile menu) which handles your links and prevents “Page scroll to id” from doing its thing. Don’t know if you installed (or updated) this plugin recently, but this is causing the issue.

      The script that does this is (function starts on line 162):

      ...plugins/mobile-menu/includes/js/mobmenu.js

      Try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option.

      Save changes and test your page.

      Let me know if it works.

      Reply
  27. Thierry
    Posted on February 4, 2019 at 19:34 Permalink

    Hi and first of all, Thanks a lot for this plugin. It s doing a great job!

    Nevertheless I experience an issue on my website with the last link/target of the wordpress menu.

    All the five other targets are working perfectly and leads the visitor according to his click.

    The 6th anchor nevertheless brings back (a bit) below to the top of the page. I have checked the coding (the 6 of them are the same), and the settings and I dont understand why it’s not working with only one of them (the 6th of the menu list, called “blog”). I wonder if there is a limit of use per page or per menu.

    In case of doubt, you can have a look to my home page.

    I look forward to reading your advice. Many thanks in advance for your help.

    Thierry

    Reply
    • malihu
      Posted on February 14, 2019 at 23:12 Permalink

      Hello,

      Sorry for the late reply but it seems I somehow missed your comment.

      I checked your page and the “Blog” link points to a different page/URL, so it’s not handled by the plugin. I don’t know if you changed it, fixed it or need more help(?)

      Reply
  28. Stephan
    Posted on January 25, 2019 at 15:49 Permalink

    I love this plug-in, but since we upgraded to the WP Gutenberg edition the link/target button’s do not appear in the editor. Will there be an update that fixes that or will I need to use shortcode?

    Reply
    • malihu
      Posted on January 26, 2019 at 02:56 Permalink

      Hello,

      Right now, the best way to use the plugin with Gutenberg is with plugin’s shortcodes.
      “Page scroll to id” shortcodes do exactly the same thing as the toolbar buttons on the classic/old editor.

      With Gutenberg, you can create links and targets with shortcodes via Gutenberg’s shortcode block (under Widgets).

      Using the shortcodes gives you more control because you can use all the options for individual links and targets (offset, class and target attributes), the same way you did with plugin’s toolbar buttons on the old editor.

      This said, you can simplify your workflow by changing plugin’s “Selector(s)” option to:

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

      This way you no longer need to create links with the ps2id shortcode, as any link you create in Gutenberg or classic editor will be handled by “Page scroll to id” (as long as it points to an in-page target of course).

      In addition, Gutenberg provides the option to add an id to its heading blocks (under common blocks). Insert a heading block, click “Advanced” in block settings and insert the target value (i.e. id) you want in “HTML Anchor” field. You can then use this id in your link’s url.

      So if you use targets mainly on headings, you can also avoid using plugin’s ps2id target shortcode.

      FYI:
      I’m planning on adding a target block for Gutenberg and an inline link element in the future. I’ll need to do extensive testing for this and also consider what other updates Gutenberg will get, as they might add such blocks by default.

      I’m not rushing this because Gutenberg is fairly new and will probably get new similar blocks in the near future. I also prefer to let Gutenberg work for a while and have a stable API before using it.

      Sorry for the long reply!
      Hope this helps 🙂

      Reply
  29. Perica Bukic
    Posted on January 21, 2019 at 19:55 Permalink

    Hello,

    Thanks for the great plugin, is it possible to hide [ps2id id=’some-id’ target=”/] codes from visual editor? And replace it with anchor icon or something similar.

    Cheers

    Reply
    • malihu
      Posted on January 21, 2019 at 22:15 Permalink

      At the moment there’s no such feature. The main reason is that ps2id can be used as an anchor-point target ([ps2id id='some-id'/] ) and/or wrapper target ([ps2id_wrap id='some-id']your content...[/ps2id_wrap] ). Using icons for both can be a little tricky.

      Reply
      • Perica Bukic
        Posted on January 22, 2019 at 01:14 Permalink

        Alright, one more quick question, what’s the actual difference between using ps2id for setting anchors when compared to doing it with this: <li><a href="#anchor">Anchor</a></li>

        Reply
        • Perica Bukic
          Posted on January 22, 2019 at 01:17 Permalink

          Sorry, I meant with this:
          <h2 id="link">RandomLink</h2>

          Reply
          • malihu
            Posted on January 23, 2019 at 19:30 Permalink

            There’s no difference.

            Both work exactly the same. It’s just that the plugin provides ways (e.g. via shortcode) to add page anchors/targets without having to write HTML.

            Basically, you can add a target id anyway you want (with HTML, via shortcode etc.). In addition, most page builder plugins provide ways to add an id to their block elements, which does exactly the same thing.

            The only additional benefit when using the ps2id shortcode, is that it offers the target attribute, which you can use like this:

            [ps2id id='some-id' target='#another-id'/]

  30. LAtelier
    Posted on January 18, 2019 at 22:36 Permalink

    Hi there! Your plugin is pretty awesome, thank you! I am suing it with a super simple theme called Blankslate and with WP Bakery Page Builder. There isn’t any other plugin installed.

    One problem I have is with Microsoft Edge and on mobile: when the plugin is activated, the anchor links created with WPBakery Page Builder on the same page are not working. So for example if I have a Get Started button at the top which is supposed to scroll to the bottom of the page, it works on Chrome and Firefox but not on Edge and not on mobile. When I disable your plugin, the link works and “jumps” to the bottom section on both mobile and Edge. So that means the conflict is between your plugin and Page Builder probably. Can you try on your end and let me know if you are encountering the same issue?

    Let me know! Thank you for your time!

    Reply
    • malihu
      Posted on January 20, 2019 at 19:27 Permalink

      Hello,

      I haven’t encountered this problem with WPBakery Page Builder.

      The issue you describe might happen for any number of reasons. I can’t really know where the “Get Started” button links to and how exactly it works.

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

      If not, you can try changing plugin’s selector (“Selector(s)” option in plugin settings) so it doesn’t handle this particular link. For example, changing the “Selector(s)” option to:

      .menu-item a

      instructs “Page scroll to id” to handle only the links in your menu(s).

      You could also try enabling the “Prevent other scripts from handling plugin’s links” option and see if it fixes the issue.

      In general, “Page scroll to id” is browser agnostic. If it works in one browser, it should work on every browser but sometimes other scripts might also handle the links which might cause an issue. I’d need to see your page in order to see what exactly happens and help.

      Also, check this guide as it might help:
      http://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/

      Reply

Comments pages: 1 3 4 5 6 7 11

Post a comment

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