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

Post a comment

Comments pages: 1 2 3 4 5 11

  1. Ludolf Eisheuer
    Posted on April 1, 2018 at 13:21 Permalink

    Sorry, but I tried it again with the code!
    Hello Malihu,
    hope you feel fine on Eastern.
    In the past I realize a site with Page scroll to id with headline links and it runs perfectly.
    But now I want to realize a site with section scrolling in handy friendly design like your example on your site.
    I did everything in my eyes but without success. You to get help with my question. In the following CSS code you will find the code form ThriveThemes WordPress Plugin:

    <div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 1</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div>

    What can I do?
    Best regards Ludolf

    Reply
  2. Ludolf Eisheuer
    Posted on April 1, 2018 at 13:16 Permalink

    Hello Malihu,
    hope you feel fine on Eastern.
    In the past I realize a site with Page scroll to id with headline links and it runs perfectly.
    But now I want to realize a site with section scrolling in handy friendly design like your example on your site.
    I did everything in my eyes but without success. You to get help with my question. In the following CSS code you will find the code form ThriveThemes WordPress Plugin:

     h1 Section 1h2 Your Heading Hereh3 Your Heading HereEnter your text here…

    What can I do?
    Best regards Ludolf

    Reply
  3. Rich
    Posted on March 29, 2018 at 16:54 Permalink

    Hi Malihu, firstly thanks for the great plug-in, I’ve been using it a while now.

    A few days ago though, the animation stopped working on a client’s website. They’ve been installing other plug-ins and I’m wondering if there’s a conflict.

    Using ‘Dev Tools’ I found this JS error from ‘Child Theme Configurator’ plugin:

    Uncaught TypeError: jQuery.scrollDepth is not a function at tracking-analytics-events.js?ver=5.2.3.1:1 at dispatch (jquery.js?ver=1.12.4:3) at r.handle (jquery.js?ver=1.12.4:3)

    Could this be a possible cause for the animation not working?

    Reply
    • malihu
      Posted on March 29, 2018 at 19:18 Permalink

      Hello,

      “Page scroll to id” doesn’t really conflict with other plugins unless they overwrite its functionality in a non-standard way.

      I can’t really say for sure though without seeing your client’s site.

      The error you’re getting for jQuery.scrollDepth and the fact that the page has stopped scrolling, sounds like an issue with the jQuery library itself.
      Is jQuery loading? Is the library included more than once? Does it load in the head or body tag?

      Reply
      • Rich
        Posted on March 29, 2018 at 21:55 Permalink

        Thanks Malihu for your reply.

        URL: http://www.citizensadvicesouthwark.org.uk

        I’ve temporarily disabled your plug-in because I need named anchors to work from ‘Home’ to ‘Advice/#tele’ etc (big icons at top of home page).

        I believe jQuery is working because other scripts rely on it (Mobile Menu, Scroll to Top). Although there maybe two references to it.

        Everything was working fine until about a week ago, which makes me think it might be one of the other plug-in updates?

        Reply
      • Rich
        Posted on March 30, 2018 at 17:03 Permalink

        Thanks Malihu, you were right in your assessment (as usual), two references to jQuery library file was causing an issue. All fixed and working again now.

        Thank you again.

        Reply
        • malihu
          Posted on March 30, 2018 at 19:10 Permalink

          Awesome. Glad I helped 🙂

          Reply
  4. Anna-Irene
    Posted on March 26, 2018 at 12:02 Permalink

    http://limeray.miamiplayground.se
    Pass:…

    Hi team, on my homepage I have a big slider.
    One the slider has been loaded – I want my visitors to automatically be scrolled down to the section below.

    I would like to set an anchor on the section below the slider, and then set a “delay” on the scroll.

    Note: this is on the homepage (the visitor will not have clicked in the menu to get there, only typed in the domain in the browser)

    Is this possible to do with your plugin?

    Best regards, Anna-Irene

    Reply
    • malihu
      Posted on March 26, 2018 at 12:53 Permalink

      I’ve removed the password you typed so it’s not public.

      1.The plugin cannot work on your site (as it is right now) because your page is not scrollable. Your layout is set to scroll only the overflowed div below the slider. “Page scroll to id” does not work on overflowed divs (it works by scrolling the root document element, i.e. html/body).

      I’m not sure why the theme is done in such way but you can easily fix it by changing few CSS:

      a)Remove overflow: hidden; from #main-wrapper (style.css, line: 536)

      b)Remove overflow: auto; from #content (style.css, line: 553)

      c)Change #top element position from absolute to fixed (style.css, line: 412)

      Doing these changes will make your layout more orthodox and allow “Page scroll to id” to work as expected.

      2.To scroll the page automatically (without any user input) on page load, you’ll need to insert javascript in your page/template. You should insert a script like the one below in your footer.php or wherever your theme allows custom javascript:

      (function($){ $(window).on("load",function(e){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#start"); },2000); }); })(jQuery);

      The above will scroll the page to the #start target after the page is fully loaded with a delay of 2 seconds (i.e. 2000 milliseconds).

      Hope this helps

      Reply
      • Anna-Irene
        Posted on March 26, 2018 at 13:08 Permalink

        Hi team,
        thanks a LOT for your quick reply.

        I have made the changes to the style.css
        Aslo added the code to functions.php – but something might have gone wrong here?
        The site looks a bit off.
        And still the links does not work properly.

        Best regards, Anna-Irene

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

          No problem.

          1.The javascript code should be placed inside a script tag:

          <script> (function($){ $(window).on("load",function(e){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#start"); },2000); }); })(jQuery); </script>

          2.Since you changed the CSS, make sure you’re not seeing a cached version of your page (e.g. open your page in Chrome and hit SHIFT+F5 to bypass cache).

          Reply
          • Anna-Irene
            Posted on March 26, 2018 at 13:50 Permalink

            Hi again,
            I can see your comments now. I think.

            The code is working with the auto scroll on the page.

            But something looks weird och the site. The menu is not working correctly anymore.

            Do you know why this is? I have removed the code from the functions file and now I only have it in a “custom JS box” in visual composer on the homepage.

    • Anna-Irene
      Posted on March 26, 2018 at 13:31 Permalink

      Hi again!
      Now the page scroll works!

      But it seems like there is something “off” with the site.
      Can you see why?

      I removed the code from the functions file and then added it to a “custom JS box” in Visual Composer.

      Best regards, Anna-Irene

      Reply
    • Anna-Irene
      Posted on March 26, 2018 at 13:34 Permalink

      Hi team it seems like both mine and your comments are disappearing?

      I just wrote:

      Hi again!
      Now the page scroll works!

      But it seems like there is something “off” with the site.
      Can you see why?

      I removed the code from the functions file and then added it to a “custom JS box” in Visual Composer.

      Reply
    • [email protected]
      Posted on March 26, 2018 at 13:42 Permalink

      Possible you can answer me by my email adress?
      This comment page is not working properly – I cannot see any old comments / answers.

      I think the code might have done something bad with the page menu.

      So grateful for your help. Will donate as thanks!!

      Reply
      • malihu
        Posted on March 26, 2018 at 15:33 Permalink

        I think you also need to change your menu CSS a bit:

        Change #sidebar element position from absolute to fixed (style.css, line: 621) and its z-index from 1 to 9999 (style.css, line: 630)

        Reply
  5. Luigi
    Posted on March 20, 2018 at 15:32 Permalink

    Hey there,
    I searched the comments as you already explained really a lot. But I could not find an answer on this:

    Is it possible to define different offsets per target and not per link?

    I use default offset for my nav-bar which works fine for all links/elements except the first, because it overlaps my front image section.

    Regards,
    Luigi

    Reply
    • Luigi
      Posted on March 20, 2018 at 15:35 Permalink

      I checked the Offset-Section as well: http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-settings-offset

      But could find out how to define a default and a specific target offset within the regarding option.
      Something like: 100 (default), 200 (#portofolio)

      Reply
    • malihu
      Posted on March 21, 2018 at 02:03 Permalink

      Hi,

      There’s no offset for targets (offset applies to links). You can move/offset a target element (or any section) in your content by simply increasing its top padding via CSS.

      One approach is to give your target element a negative top margin and an equal top padding (your element should have a css position set, e.g. relative).
      For example:

      #portofolio{ margin-top: -100px; padding-top: 100px; }

      The above will affect scrolling offset but not visual design of the element/section.

      Hope this helps

      Reply
      • Luigi
        Posted on March 21, 2018 at 13:12 Permalink

        Thanks for the hint! And sorry I bothered you with this.

        Of course I just could have set the target on the overlapping container which already has the negative top-margin..
        Well, that’s my fifth day with WP, so forgive my question 😉

        Reply
        • malihu
          Posted on March 22, 2018 at 04:22 Permalink

          No problem 🙂

          Reply
      • Luigi
        Posted on March 26, 2018 at 15:01 Permalink

        Hi again,

        now that I fixed the offest, I wonder why “scroll type/easing” only works for the first WP menu link or if I load the page directly with target-id inside the URL (http://mydomain/#myid).

        I use a[href*=#]:not([href=#]) as selector and selected “Enable on WP menu links”.
        Checking the html source all id-links in WP menu have data-ps2id-api=”true” and class=”_mPS2id-h”.

        E.g. I have #myid_1 to #myid_5 in WP menu. Clicking #myid_1 always animates scrolling. The rest won’t.
        Opening http://mydomain/#myid_3 directly will also animate scrolling to correct target. If I now click #myid_1 and then back to #myid_3 it won’t scroll again.

        Any ideas?

        Reply
        • malihu
          Posted on March 26, 2018 at 15:42 Permalink

          Hi,

          Make sure your theme does not apply its own page scrolling functionality. Go to plugin settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your links.

          Reply
          • Luigi
            Posted on March 26, 2018 at 17:26 Permalink

            Hi malihu,

            thanks for your fast reply!

            Yeah, it was indeed theme related. Found out that it includes smoothscroll.js
            The option you mentioned seems to fix only the first menu entry. When I disable it, none of the links will work.

            However, I managed to prevent the scrolling-script from loading in my child theme as I prefer your fancy scrolling animations 🙂

            Here’s the JS, which messed everything up: https://pastebin.com/8nwvkkXk
            Just in case you want to optimize the Prevention-Option – if possible

            Cheers
            Luigi

          • Luigi
            Posted on March 26, 2018 at 17:37 Permalink

            The smoothscroll script also changes the href.location to the current id during scrolling. Nothing what I would miss now.
            But maybe it’s a nice option for your plugin (?).

        • malihu
          Posted on March 27, 2018 at 20:51 Permalink

          I can’t really say why none of your links work (without seeing your page) but maybe you just need to enable “Page scroll to id” on all your links. You can do this by following this guide:

          http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#links-section-no-rel

          I think the option you mentioned is already in the plugin(?) See “Append the clicked link’s hash value to browser’s URL/address bar” option in plugin settings.

          Reply
          • Luigi
            Posted on March 28, 2018 at 13:17 Permalink

            Thanks for your reply again.

            I already enabled on all links with corresponding selector as mentioned above.
            My page is not public yet, so I can’t post an url.

            For me everything is fine now after disabling the other scroll-script as the prevent-option couldn’t fix it.

            The mentioned option appends the hashvalue on click, yes.
            The other script appends it during scrolling when entering the regarding target section without clicking a link.

        • malihu
          Posted on March 28, 2018 at 14:52 Permalink

          I see. Changing the href.location hash during normal scrolling (e.g. via mousewheel, touch-swipe etc.) is very unintuitive and an absolute no-no for user experience in general.

          This functionality would require not logging each change in browser’s history (unless you want the user to click 20 times the back button to actually go back a page), and when you remove the logging, the feature has zero value to the user.

          Reply
  6. Sven
    Posted on March 15, 2018 at 19:47 Permalink

    Hi malihu

    Thank You very much for Your create job with this Plugin!!!

    Could You just please show detailed example how to highlight target where the page scrolls.

    How to make target to be certain selected text in page and how to write css that highlights the targeted text if page scrolls to that text?

    Help is really sincerely appreciated

    Sven

    Reply
  7. Andy
    Posted on March 9, 2018 at 20:02 Permalink

    Great plugin, extremely useful and effective. However, I just ran into a problem with multiple links being highlighted if their targets appear in the same screen when scrolling. I have checked “Allow only one highlighted element at a time” but it still does not highlight only one link. Please can you help me. Thanks.

    Here is my page:
    http://atstud.io/2018/02/01/understanding-exposure/

    Reply
    • malihu
      Posted on March 11, 2018 at 17:55 Permalink

      Hi,

      Not sure if you solve the issue but when I check your page at:
      http://atstud.io/understanding-exposure/
      (I’m assuming this is the correct link), the links are highlighted one at a time.

      Reply
      • Andy
        Posted on March 14, 2018 at 18:22 Permalink

        Yes malihu, just a heads up, I fixed it by unchecking “Enable on WordPress Menu links” in the settings page.

        Reply
  8. felix roth
    Posted on March 8, 2018 at 21:54 Permalink

    Hello mahilu,

    I’m using a page builder (unyson) that automatically gives IDs to sections that I want to use as Scroll-to-targets.

    Like this: ….

    The problem is, that these IDs are not static. I.e. if you change the order of the sections within the page builder, all these section IDs change, which makes it a hassle when using them as Scroll-to-targets.

    Changing order of sections in page builder results in:

    before: id=”section_id-155550″
    after: id=”section_id-255550″

    But using 2 IDs for the same DOM element will bring me into more trouble I think:

    ….

    Wont work.

    Please help.
    Thank you.
    Felix

    Reply
    • malihu
      Posted on March 8, 2018 at 23:05 Permalink

      Hi,

      You should add extra id targets via plugin’s toolbar button or shortcode. These will remain the same no matter the order of their parent section and independent of the unyson builder’s ids.

      If you feel that you’ll change the order of your sections constantly, then you need to have a fixed target reference for your link(s). Just create the targets using the tools provided by “Page scroll to id” (button or shortcode).

      Using plugin’s function(s) to create the targets will not give your sections a second id (this is not possible anyway). It’ll create a new (hidden) element that’ll act as the target.

      Reply
  9. Steve
    Posted on February 27, 2018 at 13:07 Permalink

    Hi Malihu,

    I’m having some trouble getting the plugin to work on my environment. Would you mind helping me to get it going?

    I am using WordPress twenty seventeen theme, and I am working on localhost (website is not published yet) on my PC.

    I’ve downloaded the plugin and activated it, but when I go to the website, all of the menu items are highlighted with the colour they should be only when the are selected.

    When I do select a menu item, nothing happens.

    I’ve left the default values in the settings of the plugin.

    Any suggestions would be greatly appreciated.

    Reply
    • malihu
      Posted on February 27, 2018 at 13:22 Permalink

      Hello,

      The links highlighting you see probably comes from your theme’s stylesheet, especially if you used the full URL in your links. See “Multiple links get highlighted! How to highlight only one?” in FAQ.

      Regarding menu links doing nothing: Have you added the id target(s) in your page/content?
      See this related FAQ.

      In addition, have you followed the basic tutorial?

      Let me know

      Reply
      • Steve
        Posted on February 27, 2018 at 20:03 Permalink

        Hi Malihu,

        Thanks for the information.

        Sorry, my mistake. I have used the sections I set in the Customise –> Theme Options as the reference points in the menus. I take it, based on the tutorial, the plugin only works with id targets created in a page which has different sections.

        I’ll give your suggestions a try and see how it works out.

        Thanks again for taking the time to respond to my question and sorry for troubling you with what I should have seen in the tutorial.

        Steve.

        Reply
        • malihu
          Posted on February 27, 2018 at 20:30 Permalink

          No problem 🙂

          Reply
  10. Kat
    Posted on February 26, 2018 at 10:31 Permalink

    In Appearance > Menus, how do I set a custom link to a category page, so this plug-in will work? Also, it seems to be taking quite a long time to activate once a menu item is clicked. You can see this at http://settingForth.pub if you click Home, which I have set to a custom link, or Help Me Write > How Can I Help, which is also set as a custom link. Thanks.

    Reply
    • malihu
      Posted on February 26, 2018 at 14:25 Permalink

      It seem to take a long time to scroll because the page is reloaded and then scrolled as opposed to just scroll to the target. This happens because your link’s URL is not correct.

      Your “Home” link URL is:
      /home#primary
      when it should be:
      /#primary

      You don’t have a home directory (your homepage URL is not http://settingforth.pub/home), so you need to remove home part from your homepage link(s).

      Also, your “How Can I Help” is:
      /help-with-writing#primary
      when it should be:
      /help-with-writing/#primary

      Note the trailing slash before the hash.
      Your server is configured to always use trailing slashes, so for example when you go to:
      http://settingforth.pub/help-with-writing
      the server redirects to:
      http://settingforth.pub/help-with-writing/

      This means that a link without a trailing slash will redirect (i.e. reload the page) because for the browser the 2 URLs above are completely different. So just make sure you always use trailing slashes in your links URL.

      For category pages, just visit the category page in your browser, copy the URL from the address bar, paste it as a custom link (in your menu) and add the target id you want at the end (e.g. http://settingforth.pub/category/memoirs/#some-id).

      Reply
      • Katharine
        Posted on February 26, 2018 at 22:20 Permalink

        malihu, thank you for a thorough response. I have implemented according to your direction, and everything now works. However, it is still quite slow, apparently still the result of page reload. I may not be able to do much about speed since most of these pages actually are separate pages–unless I can figure out how to load a new target page without reloaded the home page with the image. If you, or anyone, has any suggestions, please let me know.

        Reply
        • malihu
          Posted on February 27, 2018 at 01:31 Permalink

          It seems that you don’t have “Page scroll to id” activated in your site(?), so I can’t really help. Do you have the plugin?

          Reply
  11. Jessica
    Posted on February 23, 2018 at 19:49 Permalink

    Hi there,

    Thank you for the great plugin!

    I switched the selector so that it worked with the “#” as the URL for the ‘Personal Stories More Details’ button on the home page, but I am wondering if there is a way to disable this from other pages? I ask because it seems to be affecting how my accordion works on the “Mythbusters” page.

    Thanks in advance!

    Bypass link: http://hearthub.ca?bypass=beta

    Reply
    • malihu
      Posted on February 24, 2018 at 00:59 Permalink

      Hello,

      You’ll need to change the general selector to a more specific one (e.g. the selector of your “more details” link). In plugin settings change the “Selector(s)” option to:

      .vc_cta3-container a[href*=#]:not([href=#])

      and hit save changes.

      Hope this helps

      Reply
      • Jessica
        Posted on February 26, 2018 at 19:25 Permalink

        It did! Thank you very much!!

        Reply
      • Jessica
        Posted on March 6, 2018 at 02:02 Permalink

        Hmm I seem to be running into this issue again with other elements of the website, even though the selector is specific to that one piece.

        On our “Research” page, there are tabs that include links to the other tags and those elements use #TabName. But when I click on one of these links i.e. “what can be done about it”, it slow scrolls to the bottom of the page. When I deactivate the plugin, the links function properly and switch tabs. Any idea? Thanks in advance!

        Reply
        • malihu
          Posted on March 6, 2018 at 11:13 Permalink

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

          a[rel='m_PageScroll2id'], a.vc_btn3

          and save changes. This should do the trick.

          In addition:
          Do you use WPBakery Visual Composer? If yes, I think you can give your elements (e.g. your button links) a class (via the “Extra class name” field). If this is the case, then you can give any element you want the plugin to use the extra class name ps2id. This way, only the elements with this class will be used by “Page scroll to id”.

          Reply
          • Jessica
            Posted on March 6, 2018 at 19:02 Permalink

            Hmm unfortunately it is still doing to same thing. I changed the selector in the settings, and I added ‘ps2id’ to the extra class of the ‘More details’ button on the front page (where I want the plugin to work), but unfortunately the tab links in the ‘Research’ section still slow scroll to the bottom of the page when clicked.

        • malihu
          Posted on March 6, 2018 at 19:21 Permalink

          Your settings are correct.

          It seems that your link (in “Research” tab) “what can be done about it” is handled by “Page scroll to id”. How did you create this link?

          If you created it using “Page scroll to id” toolbar button (or shortcode) then it’s going to be handled by “Page scroll to id”.

          If you don’t want this to be handled by the plugin, then you should create a standard WordPress link instead.

          Let me know

          Reply
        • malihu
          Posted on March 6, 2018 at 19:24 Permalink

          In addition:

          You should add the class ps2id on the button/link itself (you currently have it on its parent section).

          Reply
          • Jessica
            Posted on March 6, 2018 at 20:57 Permalink

            You’re right! I’ve made the changes and those in-text links all work now – thank you!

            Seems like the navigation buttons at the bottom (previous section, next section) are still being handled by the plugin. Have I done something wrong again?

        • malihu
          Posted on March 7, 2018 at 12:47 Permalink

          OK I think it’s better then to use a specific selector for each link you want to be handled by “Page scroll to id”.

          In plugin settings change the “Selector(s)” option to:

          a[rel='m_PageScroll2id'], a[href='#patientstories']

          This will instruct the plugin to handle only the link with URL #patientstories and nothing else.

          In the future, when you need another link to be handled by the plugin, you can either give it the class ps2id or add its selector in “Selector(s)” option (separated with comma). For example:

          a[rel='m_PageScroll2id'], a[href='#patientstories'], a[href='#anotherLink']

          Reply
          • Jessica
            Posted on March 7, 2018 at 21:42 Permalink

            That works beautifully – exactly what I needed. Thank you very much!

  12. Andrew
    Posted on February 23, 2018 at 14:32 Permalink

    Hello Malihu,

    Many thanks for a great plugin – I’m having issues getting it to effect my website and lock to each page section when using the menu.

    When the menu is used, the pages scroll to a point that’s short of where I would like it to land. I’m not sure if my website images are causing the landing point issues ?

    Below are the current default settings, I also tried to change the offset, -400, – 1000 – make no difference at all to the landing points.

    I’m a little new to setting this up and my pages are typically set for example :
    http://www.xigsaw.com/get-in-touch/

    Selector currently set at : a[rel=’m_PageScroll2id’]
    Website : http://www.xigsaw.com

    Appreciate any help
    Andrew

    Reply
    • malihu
      Posted on February 23, 2018 at 14:44 Permalink

      Hello Andrew,

      I checked your page but I cannot find any links used by the plugin. Did you removed them? Can you post a page where you use page scrolling so I can check it and see what happens?

      Reply
      • Andrew
        Posted on February 25, 2018 at 09:03 Permalink

        Hi Malihu,

        I forgot to mention in my prior reply, that I’m using the WordPress Twenty Seventeen theme. It only has 4 default sections in addition to the Front Page Section 1 Content section.

        I’m looking to make this Header Front page section (Home page) at 100% image with the Top menu bar lying at the bottom of the browser when you first visit the website.

        In the default theme this header Front page image and further image and text below on my website – the page section called IT Puzzles Can Be Solved, is where I also want to somehow make the website scroll to this section when you select IT Puzzles Can Be Solved from the menu.

        Hope this makes sense, as for some reason the default Twenty Seventeen theme somehow ties the Homepage section and this next section together, so when I select IT Puzzles Can be Solved from the menu, nothing seems to happen? looks like it wants to go back to home page?

        Your help here would be great !

        Regards
        Andrew

        Reply
        • malihu
          Posted on February 26, 2018 at 14:46 Permalink

          Hi,

          Your target ids (and id attributes in general) cannot have spaces. They can have letters, numbers, dashes (-) and underscores (_).

          For example, your target id should be:
          IT-Puzzles-Can-Be-Solved
          and your link’s URL should then be:
          http://www.xigsaw.com/#IT-Puzzles-Can-Be-Solved

          You also have an error (typo) in plugin’s selector. You’re missing a closing ) at the end.
          Go to “Page scroll to id” settings and change the “Selector(s)” value to:

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

          just copy/paste the selector above exactly as it is (make sure you copy all of it!) and hit save changes.

          Hope this helps

          Reply
  13. Alessandro
    Posted on February 13, 2018 at 19:23 Permalink

    Hi, first of all, good plugin thank you for this.
    So, I’ve set some anchor in my one-page web site http://www.hotelannamari.it. When i go to home page and click on menu ono to one it is all right, but if a select fast the last module on menu ( on bottom page) plugin scroll till the module before then i have to click another time on the same menu voice to arrive to destination. This apperas if I go into a article ( offers) then i click on contatti (the last voice of menu), plugin return into home page and scroll till module before contatti and i have to click newly on menu to set line correctly…
    there is a solution of this?
    thank you in advance

    Reply
    • Alessandro
      Posted on February 13, 2018 at 19:25 Permalink

      sorry domain is this
      http://www.hotelannamaria.it

      Reply
    • malihu
      Posted on February 14, 2018 at 01:38 Permalink

      Hi,

      First, you have a page error that prevents most scripts from working. The error I get in developer tools console is:

      Uncaught SyntaxError: Unexpected token <

      which comes from this line of code in your index file:

      /* */</script> <script type='text/javascript'><script type="text/javascript"> some js code here... </script> </script>

      This said, the issue you describe comes from the fact that you have some images in your page that are loaded after the page is scrolled to their position. This type of functionality is called lazy-loading and it always conflicts with in-page anchors and scrolling navigation.

      The problem is that these images (that are lazy-loaded) don’t have a fixed height set, so when they load, they increase the overall height of the document, thus changing the position of your targets that sit at the bottom of the page. This happens while the page is scrolling.

      This is a little technical so to give you an example, it’s like driving a car to a town 50km away but by the time you drive 50km, another 20km of road was just built. So now, you need to drive another 20km to reach your actual destination (i.e. the town). That’s why you need to click 2 times to reach the correct position (i.e. the id target).

      I hope all this makes sense.

      Note that lazy-loading images will have this same problem even if you don’t use “Page scroll to id” plugin.

      The only solution for this is either set a fixed width/height for your lazy-loading images placeholder or remove the lazy-loading images functionality.

      Reply
      • Alessandro
        Posted on February 14, 2018 at 18:04 Permalink

        Thank you for your assistance, you are very professional.
        I cut-off lazy load from imageand all work fine on home page though from internal page ( offerte) to home page problem remains. So I have set delay for scrolling to 3000 millisecond to give at page time to load correctly and then all works fine.
        Thank you for all,
        very god plugin.

        Alessandro

        Reply
        • malihu
          Posted on February 14, 2018 at 23:56 Permalink

          Thanks, you’re welcome 🙂

          You can probably try to lower the delay if you want. I’d start at about 300 milliseconds and increase it if needed.

          Glad I helped.

          Reply
  14. Paul
    Posted on February 4, 2018 at 09:01 Permalink

    I cant See Post ToolBar Button in Visual Editor Please tell me how to Fix?

    Reply
    • malihu
      Posted on February 4, 2018 at 11:15 Permalink

      If you’re using page builder (like Divi builder) you won’t see plugin’s toolbar buttons because these builders do not allow third party buttons in the editor.

      In such case, just use plugin’s shortcodes directly in the editor. The toolbar buttons and shortcodes do exactly the same thing.

      Reply
  15. Paul
    Posted on February 4, 2018 at 08:58 Permalink

    Am Not Getting Post Scroll to id button on Post Tabs. How to solve?

    Reply
  16. Marco
    Posted on January 30, 2018 at 20:12 Permalink

    Hi, how I can use the Plugin on a Button/Image and
    after click this Button/Images scroll down to an
    anchor on the same page, please!???
    Thank you very much…

    Reply
    • malihu
      Posted on January 31, 2018 at 08:51 Permalink

      The quickest way is to go to plugin settings and change the “Selector(s)” option value to:

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

      Save changes.

      Then go to your page/post editor and create your normal image button and make it a link that points to your target (e.g. give it a URL #your-target-id).

      Another way would be to use plugin’s toolbar button or shortcode to create your link (see tutorial).

      After you create the link, you could style it (e.g. add a background image, color, size etc.) in your CSS (e.g. via WordPress additional CSS).

      Reply
      • Marco
        Posted on January 31, 2018 at 18:07 Permalink

        Thank you! That was help me.

        I solved it via your Selector(s) Code and:
        1 – add to the Button: #sample-ID
        2 – add to the Anchor Position:

        All the Best!

        Reply
        • Marco
          Posted on January 31, 2018 at 18:08 Permalink

          2 – add to the Anchor Position:
          <a id="sample-ID"></a>

          Reply
  17. MandM
    Posted on January 28, 2018 at 04:43 Permalink

    Possible to scroll the pages of a report /document from right to left?
    I’m new to plugins & building website. Sorry if this is not a good question. Thank you

    Reply
    • malihu
      Posted on January 29, 2018 at 11:31 Permalink

      The plugin works on any direction as long as your page layout is horizontal. You can get an idea by viewing the source HTML of the horizontal demo.

      Please note the the plugin does not scroll overflowed elements (e.g. divs having their own inner scrollbar). It works by scrolling the actual page, so you need to make sure your theme/layout is such.

      Reply
  18. joe z
    Posted on January 22, 2018 at 21:46 Permalink

    I have a question. Can you put more then 1 selector in the offset field> for exampe: #masthead and .mob-menu together. I am using to 2 menu’s together when it goes mobile. Is that possibl?

    Reply
  19. Herbert von Kaufmann
    Posted on January 21, 2018 at 00:56 Permalink

    Great plugin, just one question:

    I implemented one page anchor scrolling with your plugin as follows:
    in each row i want to address I add a text element, with no text, but with your target short code (i.e. [ps2id id=’section-2′ target=’section-2 + div’/])
    I am using buttons allocated to the left of the page to address the sections (each button gets the url with the specfic section, i.e. #section-2)
    Now the following issue: when scrolling down (mousewheel) I want to have the button lighlighted, which belongs (addresses) the section. Despite passing the different sections, this does not happen (despite the above advanced short code), is there any way to get that worked?

    Regards
    Herbert

    Reply
    • malihu
      Posted on January 21, 2018 at 23:52 Permalink

      Hi,

      I’d need to see your page in order to help and provide an exact solution. Can you post your url?

      Reply
      • ValleReD
        Posted on January 27, 2018 at 00:39 Permalink

        a bit more specified:

        Scrolling the page NOT Clicking the left buttons (which are using your Plugin) should have the following effect: Button/Link is highlighted, which refers to the section one is currently passing, and when reaching the next section, the button should not be highlighted anymoren, instead the next button when

        Reply
        • malihu
          Posted on January 29, 2018 at 11:17 Permalink

          You have enabled a couple of options that prevent highlighting from working properly on your layout:

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

          You should normally disable these options and use plugin’s highlight class(es) in your CSS.

          Reply
  20. Dan Becker
    Posted on January 11, 2018 at 18:11 Permalink

    The following page has some Page Scroll functions on the 6 circular buttons at the top of the page. The also work on the text labels below the circular buttons. These link to various anchor points further down the page. It works fine on desktop, but only the first button (Inspiration) works on mobiles. The others do not do anything.

    https://stoneham-kitchens.co.uk/planning-your-kitchen/

    Please can you help fix this so it works on mobiles too.

    Thanks,

    Reply
    • malihu
      Posted on January 12, 2018 at 16:02 Permalink

      Firstly, you need to enable the plugin on your icon and text links.
      The easiest/quickest way to do this, is going to “Page scroll to id” settings and change the “Selector(s)” option value to:

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

      Hit save changes.

      After you do this, test your links (on desktop) and you’ll see the page scroll smoothly to the targets.

      The links do not work on mobile viewports because the elements that contain the targets are hidden via CSS. The hidden elements seem to be the sections images. These are hidden on mobile and the thing is that browsers do not scroll to hidden targets.

      You should move the targets outside of those elements and place them on the sections titles for example.

      FYI: The stylesheet that hides the elements on mobile is:

      /wp-content/plugins/js_composer/assets/css/js_composer.min.css

      and the CSS rule is:

      .vc_hidden-xs { display: none!important; }

      Hope this helps

      Reply
      • ignacio
        Posted on June 15, 2018 at 03:22 Permalink

        awesome it fixed it just by changing

        the selector

        a[rel=’m_PageScroll2id’]

        to

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

        thanks!!

        Reply
  21. Sebastian
    Posted on January 10, 2018 at 14:46 Permalink

    the plugin does not work. if I’m outside of a page which is linked with anchors points it works … the page is loaded then I scroll to the point I would like but if I drive within the page another point, the page reloaded.
    I have the plugin on about 5 pages active on no other side is the function as now …

    Reply
    • malihu
      Posted on January 10, 2018 at 15:08 Permalink

      Make sure your links URL matches exactly your site’s URL (the URL you see in browser’s address bar). For example, if you use the full URL in your links make sure it matches the www, https parts (if these exist).

      If you post your page/website URL I’d be able to see what happens and provide an exact solution, otherwise I can’t really help.

      Reply
      • sebastian
        Posted on January 11, 2018 at 10:58 Permalink

        this site here:
        http://www.original-bachblüten.de/dr-bach-strategie/#gesundheit

        the url is: for the points
        /dr-bach-strategie/#gesundheit
        /dr-bach-strategie/#strategie

        i have no idea what to do…

        Reply
        • Sebastian
          Posted on January 11, 2018 at 11:07 Permalink

          the menu links are here:
          Methode nach dr bach > dr bach strategie > all the links

          ive seen that they not become the tag “data-ps2id-api=”true””

          maybe an js error ?

          Reply
      • Sebastian
        Posted on January 11, 2018 at 12:20 Permalink

        ok ive fixed that ive change the href to anchorpoint only when iam on current page

        Reply
        • malihu
          Posted on January 11, 2018 at 15:43 Permalink

          Ok. Your links URL are not correct.

          For example, the link “Wiederherstellungsstrategie” is:

          http://www.original-bachblüten.de/therapie-nach-dr-bach/dr-bach-strategie/#strategie

          but this URL does not exist. The link URL should be:

          http://www.original-bachblüten.de/dr-bach-strategie/#strategie

          You should remove the therapie-nach-dr-bach dir from your links. If you do this, you won’t have to change the href on the current page.

          Reply
          • Sebastian
            Posted on January 12, 2018 at 12:10 Permalink

            oh okay i didnt have seen this, sorry…

            now it works thanks 🙂

  22. Rowan
    Posted on January 5, 2018 at 18:42 Permalink

    I have a custom menu url with #samenstellen, which directs me to that certain page id anchor. which works perfectly when I’m on that page and click the menu item with #samenstellen. However when I’m on a different page lets say /contact, and I press the menu item #samenstellen. It doesn’t go to the page, nor does it go to the page section.

    How can I fix it so, that when even on a different page. It still directs myself to that page and id where its supposed to go.

    Reply
    • malihu
      Posted on January 6, 2018 at 00:33 Permalink

      Use the full URL in your link. For example, instead of just #samenstellen, use:
      http://yoursite.com/page/#samenstellen
      or
      /page/#samenstellen

      Reply
  23. Basti
    Posted on January 4, 2018 at 17:20 Permalink

    Hey mahilu,

    thx for this easy-to-use plugin!! 😉

    just one question though…
    setting the offset to a selector or a specific value doesn’t change anything.
    do you have an idea, why this is happening?

    i’m using a floating header, but neither using the header’s height in the plugin’s offset function, nor its id will cause the scrolling to stop any sooner…

    thanks in advance and keep up the good work!

    peace,

    basti

    Reply
    • malihu
      Posted on January 5, 2018 at 10:07 Permalink

      Hi,

      There’s a chance that your theme has its own function for scrolling the page and handling page anchor links. You can try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings and see if it fixes the issue.

      It’s impossible to say what exactly happens though unless I see your page. If you can post your URL (so I could go and check it), I’d be able to provide an exact solution.

      Reply
      • Basti
        Posted on January 7, 2018 at 22:42 Permalink

        The preventing option did it!! Thank you!

        If anything comes up again, I will let you know 😉

        Take care.

        Reply
  24. Tariq
    Posted on December 20, 2017 at 04:48 Permalink

    When I use a button in a widget I have it doesn’t scroll. Is there a special way to have the code apply to buttons btn?
    Thanks,

    Reply
    • malihu
      Posted on December 21, 2017 at 14:25 Permalink

      You can enable the plugin on all links with a hash in their URL (including widget links) by doing the following:

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

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

      Save changes and test your button(s).

      Reply
  25. Luis
    Posted on December 19, 2017 at 22:13 Permalink

    Hello, I followed your video tutorial and it still does not work for me. When I click on a menu item, it does not scroll to the position but I do see URL change at the the end to /#section-1.

    The “Enable on WordPress menu links” options is clicked. I also added the special css class ‘ps2id’ to the CSS classes and I also tried to add the ‘m_PageScroll2id’ to the Link Relation (XFN) option and it still does nothing. Can you help me please?

    P.S – I have not changed the default options that come when the plugin is installed.

    Reply
    • malihu
      Posted on December 21, 2017 at 14:35 Permalink

      Hello,

      You don’t have any targets in your content. Did you create the targets that your links should scroll to?

      For example, you have a link (“Lease to Own”) with URL #section-2 but you don’t have a target element with id section-2

      You need to create the targets (see tutorial).

      Reply
  26. Alan
    Posted on December 16, 2017 at 15:43 Permalink

    Is it possible to have an offset for desktop versions and another offset for mobile versions based on a displays height and/or width?

    Thanks.

    Alan

    Reply
    • Alan
      Posted on December 16, 2017 at 15:52 Permalink

      I solved this issue by using the #masthead selector

      Reply
  27. J King
    Posted on December 7, 2017 at 19:58 Permalink

    PAGE SCROLL TO ID is awesome. Works like a charm for what I need. One question though…

    The site is: http://handhdelifranchising.com

    I have it set up with my MENU links to go to different parts o f a page. I’m using the ‘wrapper code’ provided:

    [ps2id_wrap id=’some-id’]
    your content…
    [/ps2id_wrap]

    BUT it does NOT work at all if you are NOT already on the SAME MENU tab. For example – if Im on the “Reasons To Invest” menu tab and want to go to “Our Technology” – which is under the “Opportunity To Grow” menu tab- you must first click on the “Opportunity To Grow” tab.

    Please let me know if this can be fixed and how.

    Thanks !

    Reply
    • malihu
      Posted on December 8, 2017 at 00:57 Permalink

      Hello,

      You simply need to add the full address as your links URL/href value instead of just the hash with the id (see this FAQ).

      For example, change the “Crunching The Numbers” link URL from:

      #numbers

      to:

      http://handhdelifranchising.com/opportunity-to-grow/#numbers

      Likewise, “6 Steps To Ownership” from:

      #ownership

      to:

      http://handhdelifranchising.com/reasons-to-invest/#ownership

      and so on…

      Reply
  28. Tomas Risberg
    Posted on December 7, 2017 at 16:23 Permalink

    Hi,

    Thank you so much for Page scroll to id. Sridhar Katakam helped me to make it work with the anchor links that the Zotpress plugin creates. I use Zotpress for scientific writing purposes. It handles references.

    I wonder if it would be possible to add some code to Page scroll to id for to create a so called “back-to-where-I-where arrow” from the reference list that Zotpress creates. If you click on an in-text citation in my pages you will now be slowly scrolled to the bottom, but you might then find it difficult to go back to where you were.

    It would be perfect to have a back-to-where-I-where arrow that is presented below the figure of the actual reference in the reference list. Do you think that would be possible?

    Regards,
    Tomas Risberg

    Reply
    • malihu
      Posted on December 7, 2017 at 18:33 Permalink

      Hi,

      There are 2 basic ways to do this:

      1)Enable “Append the clicked link’s hash value to browser’s URL/address bar” option in plugin settings. This way you can use the browser’s back button to go back to where you were before clicking the link.

      You can also create a link that goes back one browser history step:

      <a href="javascript:history.back()">Back</a>

      2)Create an additional target before each reference link. Then, create a “Go back” link below each reference paragraph that points to the target you created. For example:

      But why do then some robots benefit of sleep [ps2id id='back-to-3'/] [3]?

      3. …Neurophysiol Clin. 2004 Apr;34(2):59–70. [ps2id url='#back-to-3']Back[/ps2id]

      Reply
      • Tomas Risberg
        Posted on December 8, 2017 at 22:53 Permalink

        Thank you so much. I will contact the developer of Zotpress and ask if she wants to add support for this in the plugin.

        Reply
  29. Ciska
    Posted on November 28, 2017 at 18:16 Permalink

    Hi
    I have been using this plugin for some time without hassles. Recently changed my theme and now I have a problem using this from the WordPress menu.

    Your instructions above says “Click to edit each one of the links you’ve created and insert the ps2id value in “CSS Classes” field”

    Now I’m not too technical so help me with the ps2id and the text I have to add here. If my id is named #Travel, is this what I add to that CSS field?

    If I open my use my menu to go to one of these pages, it opens on that spot on the page but jumps right back to the top of the page again. I don’t think it sees my ps2id

    Some help will be appreciated
    Ciska

    Reply
  30. Tomasz
    Posted on November 28, 2017 at 09:38 Permalink

    Hello,

    Could You hellp me with adding to menu item to scroll to contact widget on the bottom of the page?
    Thank You in advance.
    Best regards

    Reply
    • malihu
      Posted on November 28, 2017 at 17:00 Permalink

      Give your link the URL:
      #text-4

      You should be able to see the id of any widget in Appearance > Widgets, so you can use this id as the target.

      Reply

Comments pages: 1 2 3 4 5 11

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php