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

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

Scroll duration

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

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

Scroll type/easing

Scroll animation easing type (i.e. the way the animation progresses at different points within its duration).
You can set different easing types according to page scrolling state: one that is applied when the page is idle (no scrolling currently running) and another that applies while page is scrolling (when a link is clicked while the page is animated/scrolling).

Scroll duration and easing demo

Scroll behavior

Always scroll smoothly when reaching the end of the page/document option adjusts scroll-to position so it does not exceed document length. For example, when scrolling to a target element that is at the bottom of the page, the scrolling animation stops smoothly at bottom of the page instead of “breaking” at an earlier point.
Enable Stop page scrolling on mouse-wheel or touch-swipe option if you want to stop page scrolling when the user tries to scroll the page manually (e.g. via mouse-wheel or touch-swipe).

Page layout

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

Offset

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

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

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

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

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; }
    a.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:
a.mPS2id-highlight-first{ background: #ff0; }

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

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

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

Disable plugin below

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

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

Administration

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

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

Advanced options

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

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

wp-config options

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

Divi WordPress Theme Monarch Social Sharing Plugin

Plugin shortcodes

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

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

Attributes

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

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

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

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

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

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

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

Attributes

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

Previous versions

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

Pages: 1 2


359 Comments

Post a comment

Comments pages: 1 2 3 4

  1. Anders
    Posted on October 17, 2018 at 14:27 Permalink

    Hey great plugin!

    The scroll function works fine on every element, but not on our slider buttons.. We use Revolution Slider on our frontpage and when you press the button “SEE EXPLAINER VIDEO” it just jumps quick down to the id, instead of scrolling smoothly. Any idea on how to fix this? 🙂

    Reply
    • malihu
      Posted on October 17, 2018 at 14:47 Permalink

      Hello,

      The reason it’s not working is because the “SEE EXPLAINER VIDEO” button is not a link (i.e. an anchor element).

      The button is a div element with a custom js code attached (probably by the revo slider script) which handles the “jumping”.

      “Page scroll to id” works on standard links with a valid href value.

      I don’t know if you can convert this div to an actual link/button but if you can it’ll work. Otherwise we can’t do much (as the div and its functionality is handled by the revo slider).

      Reply
  2. Yohan
    Posted on October 1, 2018 at 18:07 Permalink

    Hi,

    i really like this plugin but i do have a slight issue. Whenever i click on a menu item the whole page refreshes and starts from the top and then scrolls to the section as opposed to scrolling directly to the section.

    please help!

    Reply
    • malihu
      Posted on October 1, 2018 at 23:20 Permalink

      Hello,

      This is usually easy to fix. Make sure your links URL matches the actual site URL (the URL you see in browser’s address bar).

      You might need to use https instead of http or maybe add the www part in your links URL to match your site/page URL.

      For example, if your link URL is:
      http://mysite.com/#myid
      and your web server redirects all requests to www, it will “reload” the page to:
      http://www.mysite.com/#myid
      Same goes for http/https, trailing slashes etc.

      Hope this helps

      Reply
  3. marco
    Posted on September 12, 2018 at 12:40 Permalink

    Great plugin!
    Thanks for that!
    I would like just to know if there is a way to open accordion using it.
    Thanks!

    Reply
    • malihu
      Posted on September 13, 2018 at 12:27 Permalink

      Accordions are normally different plugins that rely on different scripts. To open an accordion via “Page scroll to id” depends on how the accordion script works and if it allows such functionality (with or without extra js code).

      I’d have to see your page and code to provide an answer and/or a way to do it. If you post your page/site url I’d be able to check it and let you know.

      Reply
  4. Fiona
    Posted on September 10, 2018 at 17:55 Permalink

    Hi!

    Thanks for your plugin. It’s made navigation on my site MUCH easier.
    I wondered if I can customise the scroll back to top button. It’s not very obvious on my site and I’d like to include some text and/or make the colour stand out more.

    Apologies if this is an issue with my theme but I’ve had a look around and I can’t find the answer.

    Many thanks in advance!

    Reply
  5. Martin Wagner
    Posted on September 9, 2018 at 21:33 Permalink

    Hi Malihu,

    great plugin, that works really fine. I have i slight issue, i really don’t understand.
    I build a one pager with generatePress and Elementor. It has a sticky menu in the header bulid with Elementor.
    After every page load or on the first launch, all the links that target to a lower section run slightly to far (maybe in between 50 to 100 px).
    After that they are scrolling fine to the expected target.
    I’ve disabled the smoth scrolling in generatePress and couldn’t find any settings for smoth scrolling in Elementor. I’ve also checked the check box “Prevent other scripts from handling plugin’s links (if possible)” in Page Scroll to ID settings.

    Do you have any idea what i can do?

    Thanks for your help in advance.

    Best
    Martin

    Reply
    • Martin Wagner
      Posted on September 9, 2018 at 22:15 Permalink

      Fixed it.
      The issue was solved in another post on page 3.
      I disabled A3 Lazy Load and everything works fine now.

      Best
      Martin

      Reply
  6. Josia
    Posted on August 24, 2018 at 11:09 Permalink

    Hey I love your plugin and use it a lot!

    But this time I have problem. On this website: http://autschi.net/ I use it, but it does not work as expected. Not matter which menu bar link I hit it always scrolls to the top. If the viewport is already at the top, nothing happens (the id in the adressbar does not change).

    I have no clue why it is not working, I tryed everything from changing the urls, to deactivating all other wp plugins … no effect.

    If I deactivate the “scroll to id”-plugin, jumping to the ids via wp menu works just fine.

    Maybe there is a issue with bootstrap? This is the only thing that I can think of which is different from the last website I used it on.

    I hope you have an idea how to fix this.

    cheers
    Josia

    Reply
  7. Jorge Rodriguez
    Posted on August 7, 2018 at 03:28 Permalink

    Hello Malihu,

    Maybe you can help me to identify why when I click on Arquitectura, the scroll moves further than the others links, also from internet explorer blinks the windows using that link, so I don’t know what is happening, I have the check mark to prevent other scripts and I adjust the offset for the sticky header.
    I really appreciate if you can guide me.

    Thanks,

    Reply
    • Manos
      Posted on August 9, 2018 at 00:40 Permalink

      It seems that your links are still handled by another script (not page scroll to id), despite having the option to prevent other scripts enabled.

      This option does not always work as some scripts are adding events aggressively.

      The script that currently handles your menu links (and page scrolling) is the “frontend.min.js” which comes from the elementor plugin.

      I’m not sure how you can stop this but maybe there’s some option to disable the scrolling functionality in elementor settings?

      Reply
  8. Adam
    Posted on July 10, 2018 at 11:57 Permalink

    Hi, Please can you explain how to add the styling to my top ‘tags’. For instance, on this very page your tag ‘get started’ is an in a medium grey rounded box that turns white with red text on the hover.

    At the moment I have a plain bare link (with my global link colour).

    Is the styling another plugin or more code? Maybe a link to a video to help if possible?

    Many thanks In advance,

    Adam

    Reply
  9. Paquito
    Posted on June 21, 2018 at 11:40 Permalink

    Hello,

    I made scroll menu without your plugin and it was working well in desktop, but it’s not working in mobile. I’m triying with your plugin but I have the same problem in mobile. I don’t know what I can do.

    The website is http://www.viajeslamorenica.com. It’s a WordPress site using Live Composer.

    Thank you

    Reply
    • malihu
      Posted on June 21, 2018 at 23:25 Permalink

      Hi,

      Your target sections are hidden on mobile. They have the following CSS:

      .dslc-hide-on-phone { display: none !important; }

      It comes from the following file (line 1236):

      ...plugins/live-composer-page-builder/css/frontend/main.css

      Browser’s do not scroll to completely hidden sections. If you remove this CSS rule page scrolling will work.

      Reply
      • Paquito
        Posted on June 25, 2018 at 12:21 Permalink

        Hi,

        Thank you for your quick help, but the problem still exist. I made differents sections for mobile and for desktop, and that CSS is used for that. The sections hidden in mobile are the desktop sections. If I remove the CSS everything is shown (desktop and mobile sections), so it’s not working.

        Reply
    • malihu
      Posted on June 26, 2018 at 17:55 Permalink

      If you have different sections for mobile, then your mobile menu links need to point to the mobile sections.

      At the moment your mobile menu links target the non-existing/hidden desktop sections.

      You need to either create a different menu for mobile (with links that target the mobile sections) or add id targets to your mobile sections (as you did with the desktop ones).

      Reply
  10. music
    Posted on June 16, 2018 at 20:27 Permalink

    i have a problem every it work on desktop but i have one problem on mobile . menu is not auto close when i click at the link how to fix it . help me pls

    Reply
  11. khushboo
    Posted on June 14, 2018 at 16:54 Permalink

    For me, this plugin works fine on the desktop or wider screens but on the mobile, the sticky header is hiding some of my content and heading. It is not readjusting to the section Ids. Could you help?

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

      Please tell me which page in your site uses the plugin and how to reproduce the issue.

      Reply
  12. Guy
    Posted on June 12, 2018 at 01:07 Permalink

    Hi,

    Is it possible to use the scroll behaviour in the backend (admin) side of WP?

    Use-case being that I have a custom post type that generates the content using custom fields, and the content is conditionally displayed dependent on the options chosen.

    There are a number of sections that need to be filled out before a “continue” button is displayed, so the page is quite long, and the sections are contained in tabs.

    When the “continue” button is clicked on the post edit screen at the bottom of a section, it switches to the next tab (jarringly).

    I can custom code the scroll, but before I do, was wondering if there was an easy enqueue/hook for this to be done in the backend using the plugin since it’s already in use on the front end..

    Thanks

    Reply
    • malihu
      Posted on June 12, 2018 at 20:15 Permalink

      Hello,

      There’s no hook to use the plugin on the backend. I’d suggest adding something like this in your functions.php:

      /* Add page scroll to id functionality on the backend */ function malihu_enqueue_admin_scripts($hook) { $_ps2id_be_dir = plugins_url().'/page-scroll-to-id'; $_ps2id_be_js = $_ps2id_be_dir.'/js/jquery.malihu.PageScroll2id.js'; //echo '<p style="text-align:center;">' .$hook. '</p>'; //find page hook if($hook != 'edit.php') { //Load scripts on a specific page return; } //add page scroll to id script wp_enqueue_script( 'ps2id-backend-main-script', $_ps2id_be_js, array('jquery'), NULL, 1 ); //initialize page scroll to id $_ps2id_be_inline_js = '(function($){ $(window).on("load",function(){ $("a[rel=\'m_PageScroll2id\']").mPageScroll2id({ live:false, highlightSelector:"none" }); }); })(jQuery);'; wp_add_inline_script('ps2id-backend-main-script', $_ps2id_be_inline_js); } add_action('admin_enqueue_scripts', 'malihu_enqueue_admin_scripts');

      You basically initialize (manually) a separate instance of the plugin (different from the one you use on the frontend), with different options. For example, you should not need links highlighting or having the plugin enabled on dynamic/live elements (that’s why these are disabled by the option parameters in the function call).

      In the code above you just need to set the $hook you want, so the scripts are loaded only on the admin pages you want (e.g. only when editing your custom post type). You can un-comment the //find page hook line to find the hook of each admin page and add it in the condition below.

      You should also change the "a[rel=\'m_PageScroll2id\']" and add the selector you want.

      You can check all the option parameters you can use here:
      http://manos.malihu.gr/page-scroll-to-id/#configuration-section

      Not sure if all the above help in your case, but the principle is the same for adding and initializing the plugin on WordPress backend.

      Hope this helps

      Reply
  13. Matthew
    Posted on May 23, 2018 at 21:54 Permalink

    When you click an item on the menu for it to scroll down to the section the menu stays open. Unless you click anywhere
    https://cl.ly/1s1v0M293O2r

    I also used it on this site and it does the same think. Make sure you don’t click on the way back up to see it open. https://uptimagroup.com/services/#search

    Reply
    • malihu
      Posted on May 24, 2018 at 00:04 Permalink

      The opening and closing of submenus is beyond the scope of “Page scroll to id” plugin. These functions are created and handled by either the theme or the plugin that created those menus (usually by the theme itself).

      Even if you deactivate “Page scroll to id” you’ll have the same issue.

      If you want to close the menu automatically when clicking on a menu item, you need to contact the theme (or the menu plugin) developer(s) and ask if there’s an option for this.

      If there’s no such option, you’ll need to create a custom js script and write code that’ll do what you need. It’s not difficult but you’ll need a web developer for this.

      Reply
  14. Petar
    Posted on May 21, 2018 at 12:06 Permalink

    Hi I have a problem with my website and was wondering if I can resolve it with your plugin.

    When I click on the browser back button I can get my page to scroll back on the anchor link I was on.

    Any pointer on how I can fix this?

    Reply
  15. John Iquashon
    Posted on May 13, 2018 at 21:24 Permalink

    I’m sorry, but I’m moderately skilled with CSS and code – but cannot understand why on the linked page below, the Scroll2 link works as it should when placed as a shortcode from the text editor, but the same class does not function when the class is assigned to an image.

    I’ve all of the many class references in the plugins settings documentation, or I believe I have.

    Reply
    • malihu
      Posted on May 15, 2018 at 23:48 Permalink

      Did you solve the issue? I just checked your page and the image link seems to work fine.

      Reply
  16. Steve D
    Posted on May 11, 2018 at 21:05 Permalink

    Hey!

    Love this plug-in – thanks for developing it!

    I have one slight issue with link highlighting … It seems like the navigation links are not getting the mPS2id-highlight class set after I’ve clicked on them.

    I do have “Enable on WordPress Menu links” ticked in the settings, and have tried de-selecting “Allow only one highlighted element at a time”, but no joy. I can confirm that the anchor tags in my nav menu have data-ps2id-api=”true” set.

    Can you tell me what I am missing please?

    Thanks,
    Steve

    Reply
    • malihu
      Posted on May 12, 2018 at 13:48 Permalink

      I can’t really say without seeing the page. Do the links have the _mPS2id-h class?

      Reply
  17. blake
    Posted on May 10, 2018 at 23:03 Permalink

    Hi there! I love the plugin and have used it on many sites. Thank you!

    I’m trying to link to the ‘Photos’ section on my Gallery page. When I click the ‘Photos’ link from the Gallery sub-menu, the Instagram feed is still loading, the page blinks a few times, and doesn’t scroll to the target row. I tried delaying the scroll in the settings, but that didn’t work. Wondering if there’s a way to call the scroll after the Instagram feed loads to avoid any issues?

    Best,
    Blake

    Reply
    • malihu
      Posted on May 11, 2018 at 01:14 Permalink

      You would need to develop a custom js script that will wait till all the (dynamic) feed images have loaded before initializing a “Page scroll to id” scroll event (you need a web developer for this).

      Another way would be to give the wrapper element of the gallery feed a fixed height value according to viewport in CSS. This can be tricky because the width of each image item is fluid (25%) and the height is set on-the-fly by some other script (probably the gallery script).

      Maybe you could do something like this:

      @media only screen and (min-width: 480px) { #sb_instagram { height: 0; overflow: hidden; padding-bottom: calc(75% + 50px); } }

      The above might work as long as you always load 12 Instagram images.

      Reply
      • blake
        Posted on May 14, 2018 at 15:55 Permalink

        Thank you very much! Great plugin!

        Reply
  18. Leslie Chapman
    Posted on April 24, 2018 at 14:40 Permalink

    Hi Malihu,

    Sorry if this is a totally basic and naive question, but how do you get the pages to scroll horizontally? I’ve checked the ‘horizontal’ box in the settings and for test purposes set up a couple of links and targets on a page but nothing happens – no right and left arrows, no horizontal scrolling, nothing.

    As I say, sorry if this is a bit basic.

    Reply
    • malihu
      Posted on April 27, 2018 at 23:23 Permalink

      Hello,

      In order to use horizontal scrolling, you need a horizontal layout theme.

      The plugin does not modify your theme template, i.e. it does not change your theme design from vertical to horizontal (it’s not really possible anyway).
      When you set the layout option to horizontal (in plugin settings), you simply tell the plugin that your page/theme’s layout is horizontal and it should scroll the x axis.

      You can see how a horizontal layout design looks (and works) in this demo.

      You’ll either need to find a horizontally laid-out theme or develop/design one yourself (if you’re a web developer).

      Hope this helps

      Reply
  19. Konrad
    Posted on April 19, 2018 at 17:48 Permalink

    Hi,
    first of all: Thanks for this awesome plugin!
    But I’m struggeling a bit, because I don’t know if this is even possible with your plugin.

    I know how to use shortcode to create clickable links with specific scroll durations in the editor, but I’m wondering whether I’m able to do adapt the duration, when I’m using #-links on buttons or images.
    Can I somehow use the ‘ps2id-speed-100’ in those situations?
    Regards and thanks in advance,
    Konrad

    Reply
    • malihu
      Posted on April 19, 2018 at 18:58 Permalink

      Hello Konrad,

      If you cannot add the class “ps2id-speed-100” to your standard/plain links in your editor (some page builder plugins may allow this), you’ll probably need to do it (manually) via javascript.

      If you can, add the following js code in your footer.php or wherever your theme allows you to add custom javascript:

      <script> (function($){ $(window).on("load",function(){ $("a[href='#section-3'],a[href='#section-5']").addClass("ps2id-speed-100"); }); })(jQuery); </script>

      We could change the above code to apply the speed on links that include a button and/or image element. Would this be what you need?

      Reply
    • malihu
      Posted on April 20, 2018 at 02:49 Permalink

      I should also mention that you could simply change the scroll duration in plugin settings to 100 and just add a class like ps2id-speed-900 to your menu items (you can add custom classes in wp menu items).

      This will make the default scroll duration/speed 100ms while your menu links will have a custom one set by the class name (e.g. 900ms).

      Reply
      • Konrad
        Posted on April 20, 2018 at 11:42 Permalink

        Hey,
        thanks for your response.

        Sadly, I couldn‘t really figure out how to use the javascript to get it like i want.
        (Not the most experienced guy here)

        Just for understandig… Would this script make it possible to have standard url links (on icons, buttons, etc.) while every single one of those has a different duration speed?

        BUT the hint with classes in my menu items was a good one. I think I can work with that.
        The good thing is that for example my Slider Revolution Plugin is able to add classes to buttons, so that works great.

        Greetings,
        Konrad

        Reply
        • malihu
          Posted on April 20, 2018 at 16:25 Permalink

          Yes, you could do it via javascript but if you can do it via the menu classes go with that. It’s (almost) always better to avoid extra javascript code if you can.

          For javascript, you’d also need a bit of experience to know what selectors to use. If you find that you cannot avoid adding the extra script, let me know 😉

          Reply
  20. Samuel
    Posted on April 17, 2018 at 16:21 Permalink

    Hi Malihu,

    Thanks for the great plugin… I’ve explored and combined it with a sticky module plugin, the whole used through the Divi builder.

    icet.fr/presentation/

    It looks fine and all – but if you check the link above on a computer screen (it’s deactivated on smaller screens), the active anchor-link item in the sticky menu switches some half a screen before the next anchor is actually crossed… I would like the active menu item to change when the module having the anchor is actually “crossed” but that sticky menu bar.

    I tried working on the off-set parameter – but whether I put -500, 0 or 1000 there I don’t see any change… I must be getting something wrong ?

    Thanks for your help ! Best,

    Samuel

    Reply
    • malihu
      Posted on April 18, 2018 at 01:43 Permalink

      Hello Samuel,

      This happens because a)you’ve enabled both “Allow only one highlighted element at a time” and “Keep the current element highlighted until the next one comes into view” options and b)you’ve set the target ids on the section title.

      For better/correct link highlighting I’d suggest the following:

      1)First, disable both options in plugin’s settings.

      2)In your page builder (I think you use Divi?) wrap each section in a row and move the id to the row.

      To make it more clear:

      Right now you have:

      – a widget with the section 1 title/image (that has the 1st target id)
      – a widget with the section 1 content

      – a widget with the section 2 title/image (that has the 2nd target id)
      – a widget with the section 2 content

      – a widget with the section 3 title/image (that has the 3rd target id)
      – a widget with the section 3 content

      Try to do it like this:

      – a row that has the 1st target id
      — a widget with the section 1 title/image (remove the id from here)
      — a widget with the section 1 content

      – a row that has the 2nd target id
      — a widget with the section 2 title/image (remove the id from here)
      — a widget with the section 2 content

      – a row that has the 3rd target id
      — a widget with the section 3 title/image (remove the id from here)
      — a widget with the section 3 content

      In short, place your widgets inside a row that will have the section id (and act as the target).
      This way, you don’t need to mess with any extra options and highlighting will work correctly.

      Let me know

      Reply
      • Samuel
        Posted on April 18, 2018 at 17:51 Permalink

        It worked, Malihu, thanks a lot 🙂

        All the best,

        Samuel

        Reply
  21. JP
    Posted on April 6, 2018 at 05:48 Permalink

    i am using the mesmerize theme which has a built in page builder. after installing the target link on the page and creating the custom link in the menu it works great……

    when i publish it again the target link disappears and then it doesnt work any more.

    Reply
    • malihu
      Posted on April 6, 2018 at 14:20 Permalink

      Don’t know if you already fixed this but the targets and links work for me when I visit your page.

      Reply
  22. Lester
    Posted on April 3, 2018 at 13:37 Permalink

    Hi Malihu, I have 2 ongoing pages and the “custom link” using URL/href works fine for 1 of the pages, but not so good for the other one.

    The issue is that the Top Menu button perfectly scrolls to the section/div of the homepage but if you are on another page and click any of the top menu buttons, it errors…

    I have used as recommended the following:

    Add the full address as your links URL/href value instead of just the hash with the id. For example, instead of #my-id, use http://my-site.com/page/#my-id or /page/#my-id etc. in the link’s URL.

    this is how it looks the item for the “Motos” on the Menu structure in the dashboard…

    Motos Custom Link Edit
    UR

    http://www.motorcrazygarage.es/#pg-45-1
    Navigation Label

    Motos
    MoveUp one Down one Under Inicio To the top Remove | Cancel

    url:

    http//www.motorcrazygarage.es (not working)
    http://www.ladiavla.es/ (works OK)

    Much appreciated any help u can offer with this issue… thanks

    Reply
    • malihu
      Posted on April 3, 2018 at 16:49 Permalink

      Hello,

      Some of your links (like “Historias de éxito” and “Contacto”) URL are not correct. For example, “Contacto” URL is:

      http://http://www.motorcrazygarage.es/#pg-45-6

      but it should be:

      http://www.motorcrazygarage.es/#pg-45-6

      Reply
  23. Ludolf Eisheuer
    Posted on April 1, 2018 at 14:44 Permalink

    Hello Malihu,
    I´m so sorry, but CSS is not my profession.
    Made another test and now are running all menu point to the section, but not axactly. In the following video you will see it:

    https://www.dropbox.com/s/fxo0rzpoxuw38fn/Springform%20Section%20scroll.wmv?dl=0

    <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 id="eins" class="_mPS2id-t"></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><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 id="zwei" class="_mPS2id-t mPS2id-target mPS2id-target-first"></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 2</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><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 id="drei" class="_mPS2id-t mPS2id-target"></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 3</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><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 id="vier" class="_mPS2id-t mPS2id-target mPS2id-target-last"></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 4</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><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>

    What can I do?
    Best regards Ludolf

    Reply
    • malihu
      Posted on April 1, 2018 at 16:31 Permalink

      Hi,

      I’m not sure if this is what you need but you can tweak page scrolling position using the “Offset” option in plugin settings. For example:

      Go to “Page scroll to id” settings and change the “Offset” option value to:

      40

      Save changes and test your page.

      The value 40 will offset page scrolling by 40 pixels, so if you need more/less you simply increase/decrease the number.

      Reply
  24. Ludolf Eisheuer
    Posted on April 1, 2018 at 14:27 Permalink

    Hello Malihu,
    made a second test with 4 Sections. The result is it runs only to the first Section under the Menu, but not to the other three sections.
    The Menu: eins – zwei – drei – vier
    Here the CCS:

    <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 id="eins" class="_mPS2id-t mPS2id-target mPS2id-target-first"></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><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 id="eins" class="_mPS2id-t mPS2id-target"></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 2</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><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 3</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><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 4</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><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>

    What can I do or have to do?
    Best regards Ludolf

    Reply

Comments pages: 1 2 3 4

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