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

Page scroll to id for WordPress tutorial

Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.

In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:

  1. Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
  2. Create links that point to those targets or enable the plugin on links that already exist in your site.

Creating id targets

Creating id targets in post visual editor (classic editor)

tinymce-custom-btn-ps2id-target In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor.

page-scroll-to-id-target-modal In “Page scroll to id target” modal insert the id value you want (e.g. some-id) and click “OK”. The target shortcode (e.g. [ps2id id='some-id' target=''/]) will appear in the editor. Update/save the post/page. You can now use this id value in your link(s) URL (e.g. #some-id).

Creating id targets in post editor via shortcodes

In post visual or text editor, enter [ps2id id='some-id'/] in the place you want to create the target and set the id attribute to the value you want. This will create a simple anchor-point target. If you want to wrap your content (or part of your content) in a target id (same as adding an id attribute to some content), use the [ps2id_wrap] shortcode:

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

Update/save the post/page so you can use this target value in your link(s) URL (e.g. #some-id).

Click here for more info on target shortcodes

Creating id targets in post block editor (Gutenberg)

You can use plugin’s shortcodes in the block editor. Click on the “Add block” icon and select “Shortcode”.
Add the [ps2id id='section-1'/] in the shortcode field to create a target with id section-1.

You can also use the [ps2id_wrap] shortcode accordingly.

If you use headings in your content, you can use the “HTML Anchor” attribute of the heading block to set its target id. Select your heading, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field. See detailed tutorial.

You can generate id targets for any block element, by setting its class name to: ps2id-id-yourid.

Click on a block element (e.g. a paragraph), click “Advanced” in the right panel and set the target id you want in the “Additional CSS Class” in the form of:
ps2id-id- plus the id you want.
For example, if you want to create the target id “last-section”, give the element the CSS class:
ps2id-id-last-section.

The plugin has its own custom block for inserting targets: “Page scroll to id target”

Creating id targets in HTML

Wrap your content in a div with an id attribute (recommended for better link highlighting) or add simple anchor points (with id attributes) before each content section. Examples:

<div id="section-1">
  <p>Section 1 content...</p>
</div>

<div id="section-2">
  <p>Section 2 content...</p>
</div>

<div id="section-3">
  <p>Section 3 content...</p>
</div>
<a id="section-1"></a>
<p>Section 1 content...</p>

<a id="section-2"></a>
<p>Section 2 content...</p>

<a id="section-3"></a>
<p>Section 3 content...</p>

Creating id targets in WordPress widget areas

Create targets in your widget areas (Appearance → Widgets) via plugin’s “Page scroll to id target” widget.
Keep in mind that all WordPress widgets have existing id values that you can use with your links. You can find these id values within each active widget under “Page scroll to id target” label. The option to display these values is “Display widgets id attribute” which is enabled by default.

FAQ

Divi WordPress Theme

Creating links

page-scroll-to-id-target-menu The plugin is enabled by default on WordPress Menu links (Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to.

Edit your menu and add “Custom links” as these type of links allow us to enter a custom URL with the id we want. Your links URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc.

Please note that if you want your links to work from other/different pages, you’ll need to insert the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id) or the relative-root URL (e.g. /page/#some-id).

tinymce-custom-btn-ps2id-link In post visual editor, click the toolbar button “Insert/edit Page scroll to id link” to create a link at the cursor position in the editor or from text you’ve already selected.

page-scroll-to-id-link-modal In “Page scroll to id link” modal insert the link’s URL and text. The URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc. When ready, click “OK” and the link will appear in the editor. You can edit the link via both “Insert/edit link” and “Insert/edit Page scroll to id link” buttons, as well as inline.

“Page scroll to id link” modal provides additional options like “Offset” and “Custom class(es)” that can be used to change link’s offset, its scroll duration/speed etc.

In post visual or text editor, enter [ps2id url='#some-id']link text[/ps2id] in the place you want to create the link and set the url attribute and link’s text to the values you want. The shortcode provides the same options as plugin’s “Insert/edit Page scroll to id link” toolbar button via attributes.

You can use plugin’s shortcodes in the block editor. Add the shortcode: [ps2id url='#some-id']link text[/ps2id] inside any block element to create a link that points to the “some-id” target.

Keep in mind that since “Page scroll to id” version 1.6.3, the plugin is enabled by default on all links with a non-empty hash value (e.g. #some-id) in their URL. This means that you don’t have to use plugin’s shortcode to create links, as any link you create via the WordPress editor will work.

Any link with ps2id class or m_PageScroll2id rel attribute value will be handled by the plugin. For example:

<a href="#some-id" class="ps2id">link text</a>
<a href="#another-id" rel="m_PageScroll2id">link text</a>

You can instruct “Page scroll to id” to handle any link in your page(s) by using the “Selector(s)” field in plugin settings.
If you need to enable “Page scroll to id” on all links with URL containing a hash (#), insert the following value in “Selector(s)” field:
a[href*=#]:not([href=#])

Click here for more info on “Selector(s)”

FAQ

Links highlighting

Each time a target element is visible on the screen (i.e. is within the viewport), the plugin adds the mPS2id-highlight class to its associated link or links (i.e. the links that scroll to this target). You can use this class in your theme’s stylesheet or custom CSS to style the current/active link(s), e.g.
a.mPS2id-highlight{ background: #ff0; }

Common case scenario and example

Lets say you have a sticky menu containing links that scroll to various targets/sections within the page. Your links text color is black (which may be set by your theme or some other stylesheet):

.memu-item a{ 
    color: black; 
}

When scrolling through page sections (i.e. targets) you want the link of the visible/current target to become red. You can do this by adding the following CSS:

.memu-item a.mPS2id-highlight{ 
    color: red; 
}

Notes and more info

The default highlight classes for the links are: mPS2id-highlight, mPS2id-highlight-first and mPS2id-highlight-last (you can change these class-names in plugin’s settings if you want).

For more information about the highlight classes and options see “Classes & highlight options”, “Highlight selector(s)” and FAQ below.

FAQ

Offset scrolling for sticky menus

If your page has a top sticky/fixed-positioned menu, you’ll probably need to use plugin’s “Offset” option in order to prevent the menu from overlapping your content. This option allows us to shift (i.e. offset) scrolling, so in the case of a top sticky menu, we usually need to “stop” scrolling a few pixels before the target reaches the top of the page (to accommodate for the space the sticky menu occupies).

Go to Settings → Page scroll to id → Offset and insert an offset amount equal to your sticky menu height (in pixels). You can insert its height value as a number (e.g. 100) or you can insert your menu selector (e.g. #my-sticky-menu), so the plugin calculates its height automatically.

The plugin provides special selector expressions in order to define advanced offsets and work with responsive menus. For more info see “Offset” option.

Scrolling from/to different pages

The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded.

The only thing you’ll need is to make sure your links have the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id).

Video tutorial


712 Comments

Post a comment

Comments pages: 1 6 7 8

  1. Amos
    Posted on May 25, 2019 at 21:49 Permalink

    Hello, thanks for a nice plugin. However, I get 403 error “Forbidden” each time I try to save any settings on the plugin. I change privileges on y server to allow me read, write and execute files…I had to revert to version 1.5.6 to get rid of the error. What could be the issue with new version?

    Reply
    • malihu
      Posted on May 26, 2019 at 00:45 Permalink

      1.5.6 is a very old version, so I have no idea what might be the issue with your server. What server you’re using? Which version of WordPress? What version of php?

      Did you uninstalled 1.5.6 and then installed the new version?

      Reply
  2. Dave
    Posted on May 1, 2019 at 05:10 Permalink

    the elementor page builder doesn’t seem to work when I activate your plugin. I have elementor 2.5.14 and elementor pro 2.5.5. Everything loads, except none of the tools are selectable, and just has a loading animation. if i deactivate your plugin, everything works and then activating again makes the problem come back. Is there maybe another plugin that the script doesn’t play well with? It does work if i downgrade back to elementor 2.5.7.

    Reply
    • Dave
      Posted on May 1, 2019 at 05:13 Permalink

      nevermind, I had another plugin, mystickymenu that I deactivated and it works just fine now.

      Reply
  3. Aaina
    Posted on April 18, 2019 at 12:28 Permalink

    Page scroll is not happeming without id in the url.

    Reply
    • malihu
      Posted on May 1, 2019 at 16:30 Permalink

      I’ll need to see your page/site in order to help. Can you post your URL?

      Reply
  4. Michael
    Posted on April 6, 2019 at 21:00 Permalink

    Dear Malihu,
    I tried to use your plugin with my WP-site, where I already installed OceanWP and Elementor. Could it be that those 2 plugins do not allow to use yours?
    When I follow your video tutorial on pagas (second 40…) I got a complete different layout in my WP editor.
    Do you have any idea what I am doing wrong please?

    Thank you for your help!

    Regards
    Michael

    Reply
    • malihu
      Posted on April 7, 2019 at 11:02 Permalink

      Hello Michael,

      Elementor page builder does not allow third-party plugin buttons (like the insert link/target plugin buttons) on its editor. You can do it though without using plugin’s buttons. Check the “Using Page scroll to id with Elementor Page Builder” guide here:

      http://manos.malihu.gr/page-scroll-to-id-elementor-guide/

      Hope this helps

      Reply
  5. Mushfig
    Posted on April 4, 2019 at 09:28 Permalink

    Hi i want to create site with horizontal page scroll, but i cant use your plugin i setting but didnt work.
    http://joxi.ru/YmEWzplcwZMkxA
    http://joxi.ru/E2pjEn7C7BGqpr
    http://joxi.ru/12MOzxyHl4kYPr
    http://joxi.ru/MAjyEenCjvkJb2

    I want to create this site https://themezaa.com/html/resume/default/index.html?page=contact

    can you help me

    Reply
    • malihu
      Posted on April 4, 2019 at 23:32 Permalink

      Hello,

      The plugin cannot work with the layout of the page in the link you posted. This is because “Page scroll to id” works strictly on document’s root element (html/body), i.e. it scrolls the entire page. The page you posted has an inner scrollable div.

      Hope this helps

      Reply
      • Mushfig
        Posted on April 5, 2019 at 00:05 Permalink

        Yes i get it. How can i create simple horizontal page scroll with Elementor? Can you explain? I can send you test login and pass can you setting. I used your setting but it didnt work. http://joxi.ru/GrqbjB8c4NVE3m
        What i to do wrong?

        Reply
        • malihu
          Posted on April 5, 2019 at 10:38 Permalink

          I can’t help with that. You need to search for a tutorial or template for creating such layout. This has to do more with HTML/CSS than the page builder you’re using (like Elementor).

          Reply
          • Mushfig
            Posted on April 5, 2019 at 13:22 Permalink

            Can you explaine me steb by step setting horizontal scroll with elementor. I cant find info for Elementor.

      • Mushfig
        Posted on April 5, 2019 at 00:09 Permalink

        Can i send you inbox login and pass or can you explaine?

        Reply
        • malihu
          Posted on April 5, 2019 at 14:07 Permalink

          Elementor won’t help you create a horizontal layout because it’s not within its scope or functionality. Elementor is a page builder that helps you create content.

          You need a WordPress theme. You need to search and get a horizontal designed theme.

          You either have to get a (free or premium) horizontal WordPress theme or hire a web developer to create one from scratch. Then you can use Elementor to create the content (Elementor as most page builders work with most themes regardless their layout).

          Reply
  6. Adam
    Posted on April 3, 2019 at 13:55 Permalink

    Hi,

    I installed your plugin but had to deactivate it for certain reasons. I then proceeded to uninstall the plugin.

    It seems that your plugin has made changesto my website that remain after uninstalling your plugin and after attempting to restore previous revisions of the website. The issue I have now is that the default smooth scroll that the website has now is “jumpy”. To be more precise, clicking on a link from the top will make the website smooth scroll just a bit past its destination, and then scroll back up.

    So for example if it used to smooth scroll from lines 1 to 9, now it smooth scrolls from lines 1 to 10 and then back up to 9.

    This is really a big issue and if I can’t fix it I will have to redo the entire website! Please do help.

    Regards,

    Adam

    Reply
    • malihu
      Posted on April 3, 2019 at 14:09 Permalink

      Hello,

      The plugin does not change theme files or templates in any way. In addition, when you uninstall “Page scroll to id”, it leaves zero traces in the database or the file system.

      The issues you’re having are due to some other plugin or the theme itself.

      If you could post your site’s URL, I’d be able to check your site and let you know what causes the problem(s).

      Again, “Page scroll to id” does not change websites. When it’s activated, it simply connects existing links to target elements (both created by the user).

      Please send me or post your URL so I can check it and see if I can help.

      Reply
      • Adam
        Posted on April 3, 2019 at 16:29 Permalink

        Thank you for such a quick reply!

        I am very new to WordPress and know very little about website development, so please excuse me if I seem unknowing in this area.

        The website was working just fine yesterday. Today, I made extremely minor editing, like changing the font type of some text in a content box or the font color of a word in another content box. The only actual change I made was using the “page scroll to id” plugin.

        I noticed after installing and activating this plugin that if I go to Customize -> Menus -> Primary”, the number of available fields decreased. Before, the following were available:

        URL; Navigation Label; [ Box ] Open link in a new tab; Title Attribute; CSS Classes; Link Relationship (XFN); Description).

        After installing and activating the plugin, only the first two were made available. I don’t know where, but clearly the plugin makes *some* changes. These changes remained even after deactivating and uninstalling the plugin.

        Reply
        • Adam
          Posted on April 3, 2019 at 16:42 Permalink

          I reinstalled and reactivated the plugin. The above changes were not made this time.

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

            I can’t really say what happened the first time. It’s impossible for the plugin to alter/modify Customize > Menus, so maybe something else happened.

            So I guess everything is ok now? Let me know if you need any help.

  7. david nguyen
    Posted on March 15, 2019 at 13:07 Permalink

    I got an error:
    Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#]),._ps2id,a[data-ps2id-api=’true’][href*=’#’],.ps2id > a[href*=’#’],a.ps2id[href*=’#’]
    and I think it should use ” instead of ‘ but I cannot change it in the setting.
    Pls help me…

    Reply
    • malihu
      Posted on March 15, 2019 at 13:35 Permalink

      You probably use non-WordPress version of jQuery library. Go to plugin settings and change the “Selector(s)” option value to:

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

      Save changes and test your page.

      Reply
  8. Michael
    Posted on March 6, 2019 at 12:45 Permalink

    Hi,
    by default in my theme, I have a horizontal spreadsheet with slides that works perfectly well. but when I activate “Page scroll to id”, the links take me to the bottom of my page.
    my question is: can we customize the anchors so that these tools do not interfere with existing code?
    thanks to help me.
    regards,

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

      Hi,

      Yes, you can change the plugin “Selector(s)” option to include or exclude the links you want. If I could see your page I’d be able to tell you exactly which selectors to use.

      As an example, you can change the “Selector(s)” option to:

      .menu-item a

      so the plugin handles only menu links.

      Reply
      • Michael
        Posted on March 7, 2019 at 09:15 Permalink

        Thank you for this quick response. however, I am new to wordpress, and my knowledge is still weak in code. what would you need to see my page? .. do you want a FTP account or the URL of my page only ?
        thank to your support.
        regards,

        Reply
      • Michael
        Posted on March 7, 2019 at 10:19 Permalink

        Hi,
        Now… I get it !… everything is good,

        Thank you for your support and this tool !

        Have a great day,
        regards,

        Reply
        • malihu
          Posted on March 7, 2019 at 19:06 Permalink

          You’re welcome 🙂

          Reply
  9. John Sewell-Thurston
    Posted on March 2, 2019 at 18:46 Permalink

    I have activated the Scroll to ID Plug-IN on my WordPress 5.1 Altitude Pro 2.8.1 Genesis based Theme. I am using Elementor (2.4.7) Pro (2.4.5) as my Page Builder.

    Caveat: I am not a Coder or experienced Web Designer/Developer.

    In all the Documentation it references
    “In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor. ”

    I never see that tool, toolbar button, or tool bar for that matter even though in S2ID settings I have enabled it.

    What am I missing? Please advise.
    I have enabled Gutenberg, and disabled Classic Editor, Visual Editor, Elementor Editor….never do I see the Tool shown in the Video???

    Reply
    • John Sewell-Thurston
      Posted on March 2, 2019 at 19:10 Permalink

      Found the Problem.
      The Genesis Themes have a Plugin for “Classic Editor” and I had it disabled so all I got was the Block editor…and not the Classic WordPress editor.
      Once Enabled I got the classic editor interface with the Tool/Toolbar everything!

      Reply
      • malihu
        Posted on March 2, 2019 at 22:36 Permalink

        Yes, plugin toolbar buttons work only with the classic editor. The new block editor (named “Gutenberg”) does not allow custom toolbar buttons.

        This said, you can still use the plugin with the Gutenberg block editor via plugin’s shortcodes.

        The next version of the plugin (1.6.5) will have a custom block for inserting targets. You can test it now if you want by downloading and using plugin’s development version:

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

        Reply
  10. Murugan
    Posted on February 6, 2019 at 18:23 Permalink

    Hi . . Thanks for the plugin. I want add some margin-top : 40px; on the target content. How to apply this.?

    Because if i click one target link that time the target content 30px hide by my menu bar. so i want use maring-top on the target content. Help me.

    Reply
    • malihu
      Posted on February 6, 2019 at 23:51 Permalink

      Hi,

      You can do this by using the plugin’s offset option. Go to plugin settings and set the “Offset” option to:

      40

      Alternately, you can give your target element a top padding (not margin). For example:

      #your-id{ padding-top: 40px; }

      Reply
  11. Thor
    Posted on January 21, 2019 at 14:21 Permalink

    Any chance for a guide for Elementor? I want to use this when clicking an icon (which jumps to an anchor link), not from the WordPress menu.

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

      For Elementor, go to plugin settings and make sure the “Selector(s)” option value is:

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

      and also that “Prevent other scripts from handling plugin’s links” option (under “Advanced options”) is enabled/checked.

      If your icon is an actual link, the plugin should work. If you send me your link I’d be able to check it and help.

      Reply
      • Christina
        Posted on February 1, 2019 at 14:01 Permalink

        Hi ,
        Actually im using Neve WordPress theme, were its a parallax website and im unable to add menu to scroll page, though i put #section id after link its not working. Kindly suggest me how exactly i can insert menu in that theme. thank you.

        Christina

        Reply
        • malihu
          Posted on February 2, 2019 at 11:43 Permalink

          Hi,

          I’m guessing you what to make your “Focus” link scroll the page, right?

          If yes, you need to add a target with id focus in your page. Currently there’s no focus target in the document.

          Reply
  12. Karen
    Posted on January 2, 2019 at 22:37 Permalink

    I love this plugin but have always abandoned it because I can’t seem to get the offset to work correctly.

    My sticky menu changes height w different screen sizes and is set with a class selector, not an id.

    I’ve tried using px in the offset settings, but that doesn’t work and using .site-header doesn’t seem to work either.

    Any suggestions? I’m about to scrap it again!

    Thanks so much,
    Karen

    Reply
    • malihu
      Posted on January 7, 2019 at 00:17 Permalink

      Your theme seems to be using its own scrolling functions that prevent “Page scroll to id” from doing its thing. That’s why offset doesn’t work. Try this:

      Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      Let me know if it worked

      Reply
  13. AT
    Posted on December 12, 2018 at 23:52 Permalink

    Hi Malihu,
    Thank you for this plugin and your support!
    I am using beaver builder for the site. The menu links work for all the sections but I cannot get the menu to highlight when scrolling up and down.
    Also if its possible to get the menu bold and highlight when scroll up or down that would be great. Of curse I’m doing something wrong..
    Here is the site
    https: // www. taifinancialconsulting. com

    Appreciate your input.
    Thank you
    At

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

      Hello,

      You need to change the CSS selector you added from:

      #menu-main .current-menu-item a.mPS2id-highlight

      to:

      #menu-main a.mPS2id-highlight

      so all menu items get highlighted.

      Reply
  14. Enrico
    Posted on November 28, 2018 at 17:56 Permalink

    Hi is possible use your plugin with the mouse wheel?
    Going up and down scrolling the wheel jumping from one section to another?
    Thank u
    E

    Reply
  15. Sonja
    Posted on August 29, 2018 at 08:14 Permalink

    Thanks for the plugin, I followed your tutorial but can’t get it to work for some reason.

    The page I’m working on is http://seroinstitute.com/accommodation/

    Are you able to check & let me know if I’m doing something wrong?

    Reply
  16. Nazar
    Posted on August 26, 2018 at 12:27 Permalink

    Help me please!
    The problem is that two menu items are highlighted at once. It is necessary to highlight only one of them while scrolling through the page
    how to fix: http://prntscr.com/kmi40s
    site: http://makaroni.design-time.com.ua/
    I use: Elementor Pro, Astra, Page scroll to id

    Reply
    • Nazar
      Posted on September 2, 2018 at 16:53 Permalink

      changed the theme to OceanWP

      Reply
  17. Dominik
    Posted on August 22, 2018 at 11:46 Permalink

    I´m already big fan of this awesome plugin! My only problem is hightlighting. The menu items don´t highlight or change any classes. By clicking them it is working. It´s just the thing with recognize the content in the viewport. Can you help me please?

    Reply

Comments pages: 1 6 7 8

Post a comment

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

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

css.php